In H5, it's Html. We don't have an el tag here. So we can only use templates. The benefits are described above
<!-- more -->
Scan code to pay attention to public numbers, and update work regularly.
In web development, it is common for js to parse json. It's very complicated. Handlebars uses a template. As long as you define a template and provide a json object, handlebars can put the json object into the template you set, which is very convenient and easy to use!
- In H5, it's Html. We don't have an el tag here. So we can only use templates. The benefits are described above.
Cycle traversal in H5
- Step 1: define the template in html, and put the json in the template in the background.
<script id="task-table-template" type="text/x-handlebars-template"> {{#each this} / / traversal loop format, equivalent to foreach <a href="{{link}}">//link in json must be in {}} format <strong> {{Obj_title}}//Ditto </strong> </a> {{/each}} </script>
- Step 2: instantiate the template in js
var myTemplate = Handlebars.compile($("#task-table-template").html());
- Step 3: transfer the background json to display and determine the display location of the template. The following columns will display the template on the div of class = notice GUI srcoll
$('.notice_srcoll').html(myTemplate(data.noticeTasklist));
- The json mentioned here is the familiar json. Let's see a column
var data = { users: [ {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" }, {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } ]};
Use of if else in H5
- If else in handlebar only supports the primitive, that is to say, only true and false judgments are supported. In fact, in many cases, the judgments in our logic are not only true and false. At this time, we will do so. Take a look at the original if else
{{#if score}} <li> <font> <input type="checkbox" name="you" id="{{id}}" class="regular-checkbox big-checkbox" value="{{id}}" checked disabled/> <label for="{{id}}"></label> </font> <div class="li_div"> <strong> {{name}} </strong> <p>Lecturer {{teacher}} </p> </div> </li> {{else}} <li> <font><input type="checkbox" name="you" id="{{id}}1" class="regular-checkbox big-checkbox" value="{{id}}" /> <label for="{{id}}1"> </label> </font> <div class='li_div'> <strong> "{{name}}" </strong> <p>Lecturer {{teacher}} </p> </div> </li> {{/if}}
- The judgment here means that the score undefined null false [] returns false, and the score size cannot be determined here. At this time, we use Handlebars.registerHelper to define helpers to expand handlebars.
- html code
{{#compare age 20}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{else}} <tr> <td>?</td> <td>?</td> <td>?</td> </tr> {{/compare}}
- js extension to handlebars
//Register a Helper of comparative size to determine whether v1 is greater than v2 Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //Satisfy add to continue return options.fn(this); }else{ //Execute the {{else}} part if the condition is not met return options.inverse(this); } });
- It needs to be explained here that when using Handlebars.registerHelper to register events, if options are not passed in the following function, we can call them directly. If there are options, we need to add ා, because adding options is a block level Helper.
- A list of events
Handlebars.registerHelper("addOne",function(index,options){ return parseInt(index)+1; });
- call
<label for="checkbox-2-{{addOne @index}}"></label>
- List two
Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //Satisfy add to continue return options.fn(this); }else{ //Execute the {{else}} part if the condition is not met return options.inverse(this); } });
- call
{{#compare age 20}}
- The original if also supports multi-level judgment
{{ාාif name.xxx}}}, this is written assuming that the name attribute is a map, and checking whether the name attribute contains the xxx attribute.options parameter in Helper
- Here's a reference to a blog on the Internet
{{#sort ages id="ages-list" class="con" }} <span>{{@name}}:{{this}}</span> {{/sort}}
- After compilation, the above information is repackaged in options. Here is the registration code
//The information above is in the options below Handlebars.registerHelper("sort",function(context,options){ var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">"; for(;i<context.length;i++){ str+=options.fn(context[i],{data:{name:options.data[i]}}); } str+="</div>"; return str; });
-
What information does options in helper contain?
- Data: when you render a template, you can pass it in, such as template(context, {data: data}). (/ / later in this article)
- Hash: when saving the write template, you can pass in some values in the form of key value pairs. For example, there are ID and classes attributes in the above div, both of which are key value pairs, and they will exist in options.hash. Here we can see them as map
- FN: method, the official explanation says that "options.fn can be considered as a compiled ordinary handlebars template, and its calling execution environment is considered as' this', so you can call this as the execution context". Here is the closed loop in the above Div. What is a closed-loop body? The so-called closed-loop body is a closed-loop body. The span in the above div is a closed-loop body, and the shape of < zzz > < zzz > is a closed-loop body.
- inverse: used for else of if block. To put it bluntly, it is used for {{else}}.
- Data source and template rendering
var template = Handlebars.compile($("#people-template").html()); var temp = {ages:[23,24,56,64]} var result = template(temp,{data:["tom","jak","lili","jim"]}); /*result: <div id="ages-list" class="con"> <span>jak:24</span> <span>lili:56</span> <span>jim:64</span> </div>
- In template rendering, VAR result = template (template, {data: ["Tom", "JAK", "Lili", "Jim"]}); that is, the data is passed in during rendering. Normally, a json data is passed in. When two json are passed in, the data in the second json is the placeholder of the replacement template ({@...}})
- str+=options.fn(context[i],{data:{name:options.data[i]}}); this sentence is to pay the name field in the data passed in during template rendering to the placeholder {@ name}. context[i] is passed to {{this}} in the text, which is equivalent to {{ages}}. When rendering, you must match. For example, if my data source is ages, you must use ages. Why do I use {{this}} above? Because I use ages in div, the context of this under div refers to ages
Copy each to write advanced list
- Template
{{#each comments}} <div class="comment"> <h2>{{subject}}</h2> {{{body}}} </div> {{/each}}
- In the above template, we can see that what we traverse is Div. div itself is a closed-loop body, all of which are in our options.fn, so our helper can directly traverse it.
Handlebars.registerHelper('each', function(context, options) { var ret = ""; for(var i=0, j=context.length; i<j; i++) { ret = ret + options.fn(context[i]); } return ret; });
- According to this, we can write more advanced traversal
- Template
{{#list nav}} <a href="{{url}}">{{title}}</a> {{/list}}
- It's not hard for helper to see that a is a closed-loop body, that is, we pass in the value, and there will be < a > < a > < a > in options.fn automatically. What we need to do is to add < UL > < UL > and add < li > < li > closed-loop body to each item. In this way, there are more specifications. This is also available on the official website.
Handlebars.registerHelper('list', function(context, options) { var ret = "<ul>"; for(var i=0, j=context.length; i<j; i++) { ret = ret + "<li>" + options.fn(context[i]) + "</li>"; } return ret + "</ul>"; });
H5 blank processing
- The blank space in the template can be ignored, and both sides of the mustache declaration can be used. Just add a ~ character. When this is written, all whitespace on this side is removed until the most recent Handlebars expression or non whitespace character on this side
{{#each nav ~}} <a href="{{url}}"> {{~#if test}} {{~title}} {{~^~}} Empty {{~/if~}} </a> {{~/each}}
{ nav: [ {url: 'foo', test: true, title: 'bar'}, {url: 'bar'} ] }
- The result is not wrapped or blank for formatting:
<a href="foo">bar</a><a href="bar">Empty</a>
Partial information reference!!!
Scan code to pay attention to public numbers, and update work regularly.
< span id = "addme" > join the team</span>
WeChat public address