Some usage of handlebar--Summary of personal use

some uses of handlebar Overview and IntroductionHandlebars is a JavaScript semantic template library that quickly builds web templates by separating view and data. It uses the idea of "logic-less template" (no logical template) to be precompiled at load time, rather than to compile when the client executes to the code, which guarantees the speed of the template to load and run. Simply put: Handlebars is a very good front-end separation scheme Use

Handlebars installation is relatively simple and convenient; handlebars is a pure JS library, so you can use the script tag to include the handlebars.js as with other JS scripts

<script src= "Jquery.min.js" ></script>
<script type= "Text/javascript" src= ". Js/handlebars.js" ></script>  

Basic

Render object data on a page

JS Code

Use jquery to get
the template var tpl   =  $ ("#tpl"). html ();
Pre-compiled templates
var template = Handlebars.compile (TPL);
Analog JSON data
var context = {name: "XXX", Content: "This is Handlebars"};
Match JSON content
var AAA = template (context);
Enter
the template $ ("#wrap"). HTML (AAA);

Template structure

<script id= "TPL" type= "Text/x-handlebars-template" >  
<div class= "Demo" >  
 
Expressions for handlebar 
Block 
Sometimes when you need to go deeper into an expression, blocks comes in handy, and in handlebars you can follow the expression with a # number to represent blocks, and then end the blocks with {{/expression}}. If the current expression is an array, handlebars "Automatically expands the array" and sets the context of the blocks to an element in the group.

<ul>  
{#arr_data}}
    <li>{{language}}</li>
{{/arr_data}}
</ul>  
 
The following is the JSON data

{
  Arr_data: [
    {language: ' Hello '},
    {language: ' word '},
    {language: ' handlebars '}
  ]
}
 
The above code automatically matches the Arr_data data and expands the data if/else and unless

Handlebars if judgment can only judge true and false, there is no way to do this kind of a===10 logic judgment.

#模板
{{#if isTrue}} <p>isTrue</p> {/if}}
{{#if email}} <p>{{email}}</p> {{else}} <p >is not email</p> {{/if}}
{{#if num}} <p>{{num}}</p> {{/if}}
{{#if data1}} {{else}} <p& gt; No this field </p> {{/if}}

#json数据
{
  istrue:true,
  email: ',
  num: ' 0 '
};

#页面效果
isTrue
is not email 0
does not have this field
 
Description: Handlebars If the type conversion is done before judgment, such as ", Undefined, null, 0, [] etc. will be recognized as false. However, the above example of ' 0 ' is a string, so it will still be displayed. If you can determine if there is a field, if the content of else is not executed unlesee and if are exactly the opposite, when false is executed; is true when executing the content of else inside  with

{{#with}} in general, the handlebars template will be passed and assigned in the context of the compile phase. Using the With method, we can transfer the context to a section of the data (if your data contains a section). This method is useful when working with complex template. Simply put, with can judge whether these data are there; Personal feeling and if quite like the "

{{#with author}}
  There is author to display the contents of the inside, no do not show
{{/with}}
 
handlebar Access (PATH) 
Handlebar supports path access, handlebar also supports nested paths, making it possible to find properties that are nested below the current context
You can also access properties by using the. /, to access the parent property. For example: (using the. Access example) "is often paired with a with"

#模板
 
Traverse each 
Traversal can be considered as one of the most commonly used functions, and it is necessary to use each for a lot of data presentation. The traversal of handlebar is useful for arrays and objects.

#模板
{{#each this}} 
  <p>{{this.name}}:{{this.age}}</p> 
{{else}}
  <p>no data </p>
{{/each}}

#json
[
  {name: ' AAA ', age:23},
  {name: ' BBB ', age:55}
]
 
Some tips for traversing @index or @key can get serial numbers, but the serial numbers start from 0, and if you need to write a helper from 1 onwards; @key can also get the index value of an object @first and @last can determine whether it is the first or last of the array. HTML Escape

Sometimes an article in the background is rich text content, and we want to convert it to HTNL output. "{{}}" output default escaped HTML, almost all template engine output is escaped HTML by default, to avoid XSS attacks. If you want to avoid escaping, please use "{{{}}}"

#模板
<div>{{richText}}</div>
<div>{{{richText}}}</div>

#数据
var data = {
    RichText: ' <div>this is content</div> '
};
 
HelpersData from the background is often needed to do processing, such as the time format, the amount of formatting, the beginning of the index value, and even some state operations; So this time will need helper, this is handlebar the most important function, because it makes handlebar so good.