I am try to use mustache.js for templating but my basic code is not working Pls help where I m going wrong-
var person = {
firstName: "Christophe",
lastName: "Coenraets"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>";
var output = Mustache.render(template, person);
document.getElementById('result1').innerHTML = output;
The above code is working but the below code is not working :-
This line is written in my .html page:
<script id="sample_template" type="text/template">
<h1>{{firstName}} {{lastName}}</h1>
</script>
This line is written in my .js file:
var data ={
firstName: "Christophe",
lastName: "Coenraets"
};
var template = $('#sample_template').html();
//console.log(template); this prints the html content in console
var info = Mustache.to_html(template, data);
$('#result1').html(info);
I am try to use mustache.js for templating but my basic code is not working Pls help where I m going wrong-
var person = {
firstName: "Christophe",
lastName: "Coenraets"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>";
var output = Mustache.render(template, person);
document.getElementById('result1').innerHTML = output;
The above code is working but the below code is not working :-
This line is written in my .html page:
<script id="sample_template" type="text/template">
<h1>{{firstName}} {{lastName}}</h1>
</script>
This line is written in my .js file:
var data ={
firstName: "Christophe",
lastName: "Coenraets"
};
var template = $('#sample_template').html();
//console.log(template); this prints the html content in console
var info = Mustache.to_html(template, data);
$('#result1').html(info);
- Do you have any errors in the console? – Needpoule Commented Feb 19, 2014 at 14:18
-
wrap your js code in
$(document).ready(function() { ... });– Skwal Commented Feb 19, 2014 at 14:31 - @MrShibby their is no error in console and @Skwal I include $(document).ready – level_0 Commented Feb 19, 2014 at 16:17
- are you sure that the element with id="result1" exists? – Chris Charles Commented Feb 19, 2014 at 17:07
- yes this is the code <h2>Result</h2> <pre id="result1"> </pre> – level_0 Commented Feb 19, 2014 at 18:10
6 Answers
Reset to default 5I got the solution i have both mustache server side and client side and the problem i describe above is that when i try to fill the placeholders at client side then those placeholder are already consume at server side(becoz i didn't sperate file which has to render server side and whom to render client side ). So their is no placeholder while rendering on client side so only i got html tags will display.
From the documentation, it seems that .to_html() is deprecated...
I had the same issue as level_0. Django templating on the server-side also uses the same tag as mustache-js i.e {{ }}
Here is a simple example that gets past the Django server-side templating issue.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {% templatetag openvariable %} name {% templatetag closevariable %}
</script>
<script>
$(document).ready(function() {
var template = $('#template').html();
console.log(template);
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, { name: "Luke" });
$('#target').html(rendered);
});
</script>
</body>
</html>
If you ended up in this thread as I did, because you googled for "Mustache.to_html is not a function", you can simply replace Mustache.to_html with Mustache.render. The first one has been removed, so you probably updated the library.
This works for me: http://jsfiddle/evildonald/qK5NT/
js:
$(document).ready(function () {
var data ={
firstName: "Christophe",
lastName: "Coenraets"
};
var template = $('#sample_template').html();
var info = Mustache.to_html(template, data);
$('#result1').html(info);
});
html:
<script id="sample_template" type="text/template">
<h1>{{firstName}} {{lastName}}</h1>
</script>
I had this problem because I use a templater hbs on the backend. I solved it by manually creating a structure in the middle of the tag.
in html:
<div id="messages"></div>
<script id="message-template" type="x-tmpl-mustache"></script>
create html:
const messageTemplate = document.querySelector('#message-template');
messageTemplate.innerHTML = `
<div>
<p>
<span class="user_name">{{username}}</span>
</p>
<p class="user_message">{{message}}</p>
</div>
`;
used:
const obj = {
username: message.username,
message: message.text
};
let html = Mustache.render(messageTemplate.innerHTML, obj);
messages.insertAdjacentHTML('beforeend', html);