Handlebars template engine uses learning notes, handlebars learning notes

Handlebars template engine uses learning notes, handlebars learning notes
I was a little nervous when I wrote my blog for the first time. I wanted to record the process of the template engine I used. Although there are many items on Baidu, I want to sort them out for later viewing. Not much nonsense. Start! I used handlebars as a template engine during the project process, with a clear code structure and clear data rendering. You will like it. The handlebars template automatically matches the corresponding values, objects, and even functions. Try it to get a better understanding of it! For example:

　　<div id="test">　　　　Html section
　　<div id="test">　　</div>
Js Section
You create a template separately. ID (or class) and type are very important because you need them to get the template content.
<Script id = "dataTemp" type = "text/x-handlebars-template">

<! -- {# Each} can be understood as a loop command, which loops through the data attribute in the json object. -- >{# Each data }}< div> 
// Template var dataTemp = Handlebars. compile ($ ("# dataTemp" ).html ());

$ ("# Test" ).html (dataTemp (data) ;}); </script>
The above are the most basic usage methods. There are many methods like if/else and with in javascript. How to use them! The next step is how to make it a template that can be reused in many places. This is what my boss taught me. Thank you! I don't have a good memory. I will write it down and share it with you to make progress together. It is implemented through handlebars. precompile () and supports all options with the same parameters as the Handlebars. compile method. // Basic data
data = {    "student" : [{    　　"name" : "a",    　　"sex" : "1",    　　"age" : "11"    　　}, {   　　 "name" : "b",   　　 "sex" : "1",   　　 "age" : "11"   　　 }, {   　　 "name" : "c",   　　 "sex" : "0",    　　"age" : "11"    　　}, {   　　"name" : "d",    　　"sex" : "0",    　　"age" : "11"    }]};    
　　
If the data is ready, we need an html template.
var tstring = "{{#each student}}　　　　　　　　　　　<tr>　　　　　　　　　　　　<td>{{name}}</td>　　　　　　　　　　　　<td>{{sex}}</td>　　　　　　　　　　　　<td>{{age}}</td>　　　　　　　　　　　</tr>　　　　　　　　{{/each}}";
　　
We need handlebars. precompile () to pre-compile this template,
Var temp = handlebars. precompile (tstring); // You Need to output it to the console! Console. log (temp );
At this time, the console has output, you need to copy it, save it to a variable, and save it to a js file,
The content in test. js is the following:
var myTemp = "function (Handlebars,depth0,helpers,partials,data) {  helpers = helpers || Handlebars.helpers;  var stack1, stack2, foundHelper, tmp1, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;function program1(depth0,data) {    var buffer = "", stack1;  buffer += "<tr><td>";  foundHelper = helpers.name;  stack1 = foundHelper || depth0.name;  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }  buffer += escapeExpression(stack1) + "</td><td>";  foundHelper = helpers.sex;  stack1 = foundHelper || depth0.sex;  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "sex", { hash: {} }); }  buffer += escapeExpression(stack1) + "</td><td>";  foundHelper = helpers.age;  stack1 = foundHelper || depth0.age;  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "age", { hash: {} }); }  buffer += escapeExpression(stack1) + "</td></tr>";  return buffer;}  foundHelper = helpers.student;  stack1 = foundHelper || depth0.student;  stack2 = helpers.each;  tmp1 = self.program(1, program1, data);  tmp1.hash = {};  tmp1.fn = tmp1;  tmp1.inverse = self.noop;  stack1 = stack2.call(depth0, stack1, tmp1);  if(stack1 || stack1 === 0) { return stack1; }  else { return ''; }}"
 
You just need to introduce this test. js into the page and then render it
// Pre-compiled template myTemp var temp = Handlebars. template (myTemp) (data. data); // Add the template to the page $ ("# leftMenu" ).html (temp );
This is the end. You can take a look at the browser.
Hey, if anything is wrong, please advise. Thank you!