this is my html:
<script type="text/html" id="ul-template">
<ul id="list">
{{> li-templ}}
</ul>
</script>
<script type="text/html" id="ul-template2">
<div id="list2">
{{> li-templ}}
</div>
</script>
<script type="text/html" id="li-templ">
<p>{{ name }}</p>
</script>
as you can see, I want to reuse the #li-templ part, but it seems that I have to write it into a file called li-templ.mustache then I can include it as partial?
can I just define them in the single html file?
I'm assuming you're using the JS flavor of Mustache.
In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.
You need to:
Define some dummy data for name
Get your partial template by getting the HTML of #li-templ
Create an object with the name of the partial (li-templ) as the key
Tell Mustache to render each template with the view data including your partial
Here's some jQuery to do just that:
var view = {"name" : "You"},
li = $('#li-templ').html(),
partials = {"li-templ": li},
ul1 = Mustache.to_html($('#ul-template').html(), view, partials),
ul2 = Mustache.to_html($('#ul-template2').html(), view, partials);;
document.write(ul1, ul2);
Here's a jsFiddle of it all working- http://jsfiddle.net/maxbeatty/EYDfP/
ICanHaz.js (ICH) can help you with this.
ICanHaz.js: A simple/powerful approach for doing client-side templating with Mustache.js.
I've found that mixing templates (in scripts tags) with the ordinary HTML in the page messes with my code editor (syntax highlighting, indenting etcetera). Loading them as a separate server keeps your HTML clean.
Check out this ICH pull request for automatic loading of <script type="text/html" src="my-templates.html"></script> from your server to one template per file.
You could also load more than one template per remote HTML file this using simple code like:
function getTemplates(url) {
$.get(url, function (response) {
$('template', response).each(function () {
ich.addTemplate(this.id, $(this).text());
});
});
}
Or, if you'd like ICH to load them automatically from urls in your page:
<head>
<link rel="templates" type="text/html" href="my-templates.html">
</head>
$("link[type=templates]").each(function (index, link) {
getTemplates(link.attr("href"));
});
In your my-templates.html
<templates>
<template id="ul-template">
<ul id="list">
{{> li-templ}}
</ul>
</template>
<template id="ul-template2">
<div id="list2">
{{> li-templ}}
</div>
</template>
<template id="li-templ">
<p>{{ name }}</p>
</template>
</templates>
Related
I'm using the underscore library to populate my template.
It works like a charm when my variable day is inside a tag. like this snippet from my code:
<template>
<label>Schedule</label>
<select class="form-control" onchange="set_from_hour('<%=day%>')" name="some_name" id="<%=day%>from_hour" >
<option value=0 selected='selected'>00</option>
<option value=1>01</option>
...
</template>
to populate this template I use this function:
days_schedule = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday']
function show_schedule_week(){
_.each(days_schedule,function(day){
_.templateSettings.variable = 'day'
var template = _.template($('template').html())
console.log(day+'_schedule')
$('#'+day+'_schedule').prepend(template(day))
})
}
Now the problem comes when i want my HTML code to display the variables, say in a header tag the variable day like below:
<template>
<h1> <%- day%> </h1>
</template>
The browser displays
<%- day%>
instead of the value of the variable.
Do you know what I'm doing wrong?
The problem is with the string that you pass to _.template(): the HTML that you read from the DOM does not have <%- day%>, but <%- day>. This is because < has a special meaning in HTML, and as here it does not represent a tag, it is encoded with an HTML entity. The same goes for >.
There are several solutions to this. One is to not use a template element in your HTML, but a string literal in your code. If however you prefer to stick with the template element (which is reasonable), then you could turn the template content into an HTML comment.
Here is an example:
days_schedule = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday']
function show_schedule_week() {
_.each(days_schedule,function(day){
_.templateSettings.variable = 'day'
// unwrap the template content by removing the HTML comment tag start/end
var template = _.template($('template').html().slice(4, -3));
$('#'+day+'_schedule').prepend(template(day))
})
}
show_schedule_week();
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.11.0/underscore-min.js" integrity="sha512-wBiNJt1JXeA/ra9F8K2jyO4Bnxr0dRPsy7JaMqSlxqTjUGHe1Z+Fm5HMjCWqkIYvp/oCbdJEivZ5pLvAtK0csQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<template><!--
<h3> <%- day%></h3>
--></template>
<div id="monday_schedule"></div>
I am trying to work with handlebar templates, but it's not going so well.
In *.html.twig I have:
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<span id="demo">
</span>
<script>
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
document.getElementById("demo").innerHTML = html;
</script>
And there is an error:
Variable "title" does not exist.
When I put this code in simple index.html w/o Symfony etc. it works. Any ideas how to fix it?
This is happening because Twig is also an HTML templating language which also uses {{ ... }} syntax to denote variables, just like Mustache is, so Twig is trying to parse it before outputting the HTML.
If you want to use Twig and Mustache together, then you'll need to escape/double-encode the curly braces that are intended for Mustache so that Twig doesn't try to parse them first.
There is a repo on Github which lets you define your own custom delimiters for Handlebar templates.
I have a list of users coming from back-end and I append each one of them to my HTML page like below. My goal is to have javascript rating system for every user.
<head>
<link href="/css/rateyo.css"/>
<script src="/js/rateyo.js"/>
<script type="text/template" id="mustache-template">
{{#user}}
<li>
{{name}}
<div id="rating"></div>
</li>
{{/user}}
</script>
<script>
$("#rating").rateYo().on("rateyo.set", function (e, data) {
});
</script>
</head>
<body>
<ul>
<!-- All the individual users will be in their own li element here -->
</ul>
</body>
Everything is working except my rating script. It should make five stars next to each user. But I heard that you can't put scripts inside templates, is it correct? If I move that <div id="rating"/> to somewhere else it works like it's meant and shows the stars.
What should I do? I can't really put that script outside of my templates.
You can add your function to the object you are trying to parse with the template, and then call the function in your template.
var userlist = {
user: [
{name: 'name nameson', doRating: function() {someOtherFunction();}},
{name: 'some otherguy', doRating: function() {someOtherFunction();}}
]
};
var someOtherFunction = function() {
$("#rating").rateYo().on("rateyo.set", function (e, data) {
//Do stuff?
});
}
<script type="text/template" id="mustache-template">
{{#user}}<li>{{name}} <div id="rating"></div></li>{{/user}}{{doRating}};
</script>
Or you could of course calculate the rating on beforehand, and implement some sort of {{user.rating}} and use that to generate in your template.
Or as I look closer, you could just add the listener after mustache is done rendering. Since the div#rating would then be available (which should really be a class btw).
This would be my approach at least.
How would I render a page and go to a specific id?
Right now I have a following function with this code:
#cherrypy.expose
#require
def page():
tmpl = lookup.get_template('page.html')
return tmpl.render()
However, now the page.html does have several subpages, which I can access through URL like mydomain.com/page#someid.
Is there a way to render a template to go directly to the id?
I think that you are mixing the ideas, the # part of the URL is the client duty to focus in the specific element id. Nevertheless, I suppose that you want to do that to dynamically embed chunks of a particular part of the page trough javascript, I can think on two possibilities:
One, compose the full page template with the different ids from different sub-templates, this is easy if you are using a template module, like mako, and make a cherrypy handler to return the indivudual parts, this is of course supposing that you are in control of the content of the page and the ids are not dynamic (generated from a db or something) and the main site is a bunch of includes.
#cherrypy.expose
def page_part(section):
tpl_name = 'page_%s.html' % section
# validate that the template exists, then:
tmpl = lookup.get_template(tpl_name)
return tmpl.render()
Mako templates:
page.html:
<html>
<body>
<div id="main">
This is the main content of the site!
</div>
<h4>Sections</h4>
<div id="section_1">
<%include file="page_section1.html" />
</div>
<div id="section_2">
<%include file="page_section2.html" />
</div>
</body>
</html>
page_section1.html:
<p> Content of section 1</p>
page_section2.html:
<p> Content of section 2</p>
Or two, use jQuery selectors or something similar to request the page once and make the sub-selects in the returned html.
$.get('/page.html',
function(data){
$('#this_page_id').html($('#sect_in_other_page', $(data)).html());
});
I just started using Mustache and I like it so far, but this has me perplexed.
I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.
For example, this works fine:
<div class="gist-detail">
{{id}} <!-- This produces a valid Gist ID -->
</div>
Additionally, this works perfect:
<div class="gist-detail">
<script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>
If I try to pull these together, something goes terribly wrong:
<div class="gist-detail">
<script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>
Chrome Inspector shows this:
GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)
... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:
<div class="gist-detail">
<script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>
And I get the same result in Inspector:
GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)
How do I get the correct values to embed in the script tag?
EDIT
I am injecting the template as follows (in document.ready:
function LoadGists() {
var gistApi = "https://api.github.com/users/<myuser>/gists";
$.getJSON(gistApi, function (data) {
var html, template;
template = $('#mustache_gist').html();
html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
$('.gist').html(html);
});
}
The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):
<div id="mustache_gist" style="display: none;">
{{#gists}}
<!-- see above -->
{{/gists}}
</div>
I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.
It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.
When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.
It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.
<textarea id="gist-detail-template" style="display:none">
<script src='http://gist.github.com/{{id}}.js'></script>
</textarea>
Now, to instantiate the template:
var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);
Here's an official example: http://mustache.github.com/#demo