<script src= "Handlebars.js" ></script>
<body>
<div id= "Content" ></div>
<div id= "Second_content" ></div>
<div id= "Third_content" ></div>
<script id= "First_entry-template" type= "Text/x-handlebars-template" >
<div class= "Entry" >
<div class= "Body" >
{{Body}}
</div>
</div>
</script>
<script id= "Second-template" type= "TEXT/LSDJFLDSJLF" >
<div id= "Comments" >
{{#each comments}}
<a href= "/posts/{{. /permalink}} ">
<span> Product Name </span>
{{Author.firstname}}
<span> Commodity price </span>
{{Author.lastname}}
</a>
<div>{{body}}</div>
{{/each}}
</div>
</script>
<script id= "Third-template" type= "TEXT/LSDJFLDSJLF" >
<div id= "Comments" >
{{#each comments}}
<a href= "/posts/{{. /permalink}} ">
<span> Product Name </span>
{{Author.firstname}}
{{#if Downflag}}
<span> Down Frame </span>
{{/if}}
{{#if upflag}}
<span> Shelves </span>
{{/if}}
<span> Commodity price </span>
{{Author.lastname}}
</a>
<div>{{body}}</div>
{{/each}}
</div>
</script>
<script>
function $ (ID) {
return document.getElementById (ID);
}
var sourcehtml = $ ("First_entry-template"). InnerHTML;
var template = Handlebars.compile (sourcehtml);
var context = {title: "My New Post", Body: "This is My first post!"};
var html = template (context);
$ (' content '). InnerHTML = html;
Console.log (HTML);
var sourcehtml = $ ("Second-template"). innerhtml;//integrate all of the data below this ID
var template = Handlebars.compile (sourcehtml);//made into templates
var html = template (context);
$ (' second_content '). InnerHTML = html;
var sourcehtml = $ ("Third-template"). InnerHTML;
var template = Handlebars.compile (sourcehtml);
var html = template (context);
$ (' third_content '). InnerHTML = html;
</script>
The above is part of the code, first look at View 1, which is the First_entry-template section, the relevant code is as follows:
<script id= "First_entry-template" type= "Text/x-handlebars-template" >
<div class= "Entry" >
<div class= "Body" >
{{Body}}
</div>
</div>
</script>
The relevant code of handlebar is written in the script tag, where the middle part of {{}} represents the view, and its contents change with the JS code, for example, the pseudo-JSON code given:
The first part gives this code--
var sourcehtml = $ ("First_entry-template"). InnerHTML;
var template = Handlebars.compile (sourcehtml);
var context = {title: "My New Post", Body: "This is My first post!"};
var html = template (context);
$ (' content '). InnerHTML = html;
The combination of the above JS code is to obtain an element with ID first_entry-template, assigning its contents to sourcehtml
The second sentence transforms it into a template through Handlebars.compile.
The third sentence creates a pseudo-JSON data context
The last sentence parses the template into a function, and the contents of the parentheses are the variables, so the result of the execution is--
My New postthis is my first post! The second part of the JS code is as follows--var sourcehtml = $ ("Second-template"). innerhtml;//integrate all the data below this ID<script id= "Second-template" type= "TEXT/LSDJFLDSJLF" >
<div id= "Comments" >
{{#each comments}}
<a href= "/posts/{{. /permalink}} ">
<span> Product Name </span>
{{Author.firstname}}
<span> Commodity price </span>
{{Author.lastname}}
</a>
<div>{{body}}</div>
{{/each}}
</div>
</script>
Context
var context = {
Body: "I love Handlebars",
Comments: [{
Author: {
FirstName: "Banana",
LastName: "89 Yuan"
},
Body: "Me too!",
Upflag:true
}, {
Author: {
FirstName: "Milk",
LastName: "89 Yuan"
},
Body: "Me too!",
Downflag:true
}]
};
But since the principle is the same, then some of the things we can get directly--
<script id= "Second-template" type= "TEXT/LSDJFLDSJLF" >
<div id= "Comments" >
{{#each comments}}
<a href= "/posts/{{. /permalink}} ">
<span> Product Name </span>
{{Author.firstname}}
<span> Commodity price </span>
{{Author.lastname}}
</a>
<div>{{body}}</div>
{{/each}}
</div>
</script>
But there's a loop here, whose code is {{#each Comments}}{{/each}}
means that both views are loops, and the loop is a comments element, a property in the context, and a collection of N commodity objects, so the number of cycles here is the number of items.
The corresponding content is the property of the product, the execution result is--
Comments I Love handlebars product name Banana commodity price 89 Yuan me too! commodity name milk commodity price 89 Yuan me too! The third template looks like this--<script id= "Third-template" type= "TEXT/LSDJFLDSJLF" >
<div id= "Comments" >
{{#each comments}}
<a href= "/posts/{{. /permalink}} ">
<span> Product Name </span>
{{Author.firstname}}
{{#if Downflag}}
<span> Down Frame </span>
{{/if}}
{{#if upflag}}
<span> Shelves </span>
{{/if}}
<span> Commodity price </span>
{{Author.lastname}}
</a>
<div>{{body}}</div>
{{/each}}
</div>
</script>
JS code, the template has an extra
{{#if upflag}}
<span> Shelves </span>
{{/if}}
This means that there is a judgment here, and if the part that follows # if is true then the following is done.
In general, this is used to determine if the object has a Upflag attribute, and the existence is true.
Template engine handlebars Syntax (1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
