So, I'm trying to render a template from an external file, and when I render it, it "works," just that it sends the script, not the actual script contents to the target.
I tried using the jquery .html() function to grab the inside contents of the script, but all I get is "undefined"
This is the body content:
<div id="target"></div>
<script>
var context = {"name": "Test"};
$.get('template.handlebars', function (data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
$(document.body).append(html);
}, 'html')
</script>
What I get is this:
<div id="target"></div>
<script>blah blah blah</script>
<script type="text/x-handlebars-template" id="template">
<h1>Test</h1>
</script>
Instead of
<div id="target">
<h1>Test</h1>
</div>
In response to someone's question:
Doing "body" instead of document.body has the same effect. The contents of the template document are:
<script type="text/x-handlebars-template" id="template">
<h1>{{ name }}</h1>
</script>
In your scenario, you have the handlebars template in a separate file –– which is not a HTML file, so you should try removing the script tag. According to the handlebars docs, they want you to include the script tags for shielding from HTML parser, but in your case that should not be a problem.
Next your jQuery $(document.body).append(html); is selecting the document body and appending the resulting HTML snippet.
To achieve the:
<div id="target">
<h1>Test</h1>
</div>
you'll have to select the target div. Doing a $("#target").html(html); should solve that issue.
I've created a sample to simulate your scenario, hope this gives more insight.
HTML file contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
<div id="target"></div>
<script>
var context = { name: "Test" };
$.get(
"template.handlebars",
function(data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
// $(document.body).append(html);
$("#target").html(html);
},
"html"
);
</script>
</body>
</html>
Handlebars template file contents:
template.handlebars
<h1>{{ name }}</h1>
References
https://handlebarsjs.com/
Related
I am new to handlehars, and feel the basic tutorials are not very newbie friendly. I have to put pieces together and the following code seems not working. The html is generated correctly which means it does work but nothing shows up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test handlebars</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
</head>
<body>
<div class="container"></div>
<script>
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
console.log(html);
$(".container").innerHTML = html;
});
</script>
</body>
$(".container").innerHTML = html;
You're mixing vanilla JS and jQuery. Either set the HTML the vanilla way,
document.querySelector(".container").innerHTML = html;
or the jQuery way:
$(".container").html(html);
I'm getting started with backbone.js and i want to build a template, containing only a html button, with my model attributes. So I defined a template in my html page as below:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
</body>
</html>
and I'm trying to build my template in my view:
var Bouton_View= Backbone.View.extend({
view_template: _.template( $('#button_template').html() ),
events:{
'click':'onClick'
},
initialize: function(){
this.$el=('#here');
},
render: function(){
this.$el.html(this.view_template(this.model.attributes));
return this;
},
onClick: function(){
var increment=0;
increment=this.Model.get("number_of_click")+1;
this.Model.set({"text":increment});
this.Model.set({"number_of_click":increment});
this.render();
}
});
but when I run the page in the browser this error message show up:
I'm pretty sure the js file is not wrong because I've try this with another html file and it worked. So what is wrong with my template? thanks in advance
Why so?
Spoiler: the underscore templating engine is fine in this case.
This example's problem is that the code which describes your Bouton_View, which probably lies here:
<script src="backbone_test5.js"></script>
is executed before the DOM parser reaches
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
element. This can be described as
Load backbone_test5.js file and execute its contents
Execute _.template( $('#button_template').html() )
Search DOM for element with id="button_template"
None found
Execute .html() function on a non-existent $ element => this results in null
Execute _.template(null) => this gives you the error you mentioned
How to fix?
There are several ways to do that.
HTML-only. Re-order the code so that DOM elements exist when queried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</body>
</html>
With some js-code. You can wrap the contents of the backbone_test5.js file with the $(...) so that it only executes once the DOM content is ready:
$(function () {
var Bouton_View = Backbone.View.extend({ /* ... */ });
});
I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );
First off here is the code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.