HANDLEBARSJS Study Notes

HANDLEBARSJS official website (http://handlebarsjs.com/)
 
1. Introduction of Templates
 
Add in HTML page
<script id= "entry-template" type= "text/x-handlebars-template" > Template content</script>
    
var Source = $ ("#entry-template"). html (); Get template content
var template = handlebars.compile (source); Compiling a template into a template function
var htmlstr = template (context); Incoming context object output HTML string
 
a template function can pass in an optional object as a second parameter
var htmlstr = template (context,opt);
 
data: This object is passed in to customize the private variable
Helpers: Access Assistant, replace the assistant with the same name at run time
Partials:pass in to provide custom partials in addition to the globally defined partials.
 
 
Pre-compilation
 
npm Install handlebars-g
 
handlebars <input> F <output>
 
The compiler compiles inputfile (such as PERSON.HBS) into a template function and then inserts it into Handlebars.templates Handlebars.templates.person
 
Handlebars.templates.person (context, options)
 
If you use precompilation, you can directly introduce Handlebarjs's prototype dependency library.
<script src= "/libs/handlebars.runtime.js" ></script>
 
pre-compile optional parameters
handlebars <input> F <output>-K each-k if-k unless
 
      
 
2. Expressions
 

 

 

 
identifiers cannot be whitespace! ' #% & ' () * +,. / ; < = > @ [\] ^ ' {|} ~
 
If you want to reference a property but its name is not a valid identifier, you can use [] access, such as:
 
{#each articles.[ 10]. [#comments]}}



<div> {Body}} </div>

{{/each}}

Pass in the parameter articles of each. [10]. [#comments] equivalent to JS object articles[10][' #comments ']
    

html escape {{expression}}} uses 3 curly braces to prevent HTML auto-escaping
 
    
{ {{link story}}}
 
handlebars.registerhelper (' link ', function (object) {

var url = handlebars.escapeexpression (Object.url),//Use escapeexpression method to prevent automatic escaping

Text = handlebars.escapeexpression (object.text);

return new handlebars.safestring (

"<a href=" + URL + "' >" + objecttext + "</a>"

        );});

    

{{"link" see more ... "Href=story.url class=" Story "}}}//Assistant add key value pair parameter can be obtained from the last parameter of the assistant Options.hash

handlebars.registerhelper (' link ', function (text, options) {
var attrs = [];

For (Var prop in Options.hash) {
Attrs.push (
handlebars.escapeexpression (prop) + ' = '
+ handlebars.escapeexpression (Options.hash[prop]) + ' "');
      }

return new handlebars.safestring (
"<a" + Attrs.join ("") + ">" + handlebars.escapeexpression (text) + "</a>"
      );
    });

    

expression Nesting

{{outer-helper (inner-helper ' abc ') ' Def '}}

The inner-helper Assistant is executed first and the result is returned as the first parameter of the Outer-helper

Space Control (use ~ To remove left and right spaces)

{{#each nav ~}}
<a href= "{{URL}}" >
{{~ #if Test}}
{{~title}}
        {{~^~}}
Empty
{{~/if~}}
</a>{{~/each}}

Context Object

    {
nav: [
{url: ' foo ', test:true, title: ' Bar '},
{url: ' Bar '}
      ]
    }

Output Results

<a href= "foo" >bar</a><a href= "bar" >Empty</a>

3. Block-level expressions (changing context objects)

<div class= "entry" >

<div class= "Body" >
{{#noop}}{{body}}
{{/noop}}
</div>
</div>

    
handlebars.registerhelper (' NoOp ', function (options) {
return Options.fn (this); This can be used directly in the helper (refers to the current context object)
    });

handlebars.registerhelper (' If ', function (conditional, options) {
if (conditional) {
return Options.fn (this);
} else {
return Options.inverse (this);
            }
        });

    
the helper function defaults to the last parameter Options,options.fn renders the helper's contents, if the helper contains the else part can call Options.inverse (context)


4.handerbarjs Path (using: /Find properties in upper-level scopes)

<p>{{./name}} or {{this/name}} or {{this.name}}</p>

5. Notes

{{!} --Log-}} or {{! log}}

6. Common APIs

A. Adding assistants

handlebars.registerhelper (' foo ', function () {});

//Add multiple assistants at once

Handlebars.registerhelper ({

foo:function () {

              },

bar:function () {

              }

        });


B. Logout Assistant

handlebars.unregisterhelper (' foo ');

        
c. Secure string conversions to prevent string injection//Prevent text from being automatically escaped
new Handlebars.safestring (' <div>html content!</div> ')

d.html Escape
handlebars.escapeexpression (String)
output HTML content as-is, &, <,;, ", ', ' convert to an equivalent entity string
        
E. Determine if the first element of the array is @first (@last determine whether the last element of the array)

{{#each array}}
{{#if @first}}
first!
{{/if}}
{{/each}}
        
{{#each array}}
{{#if @last}}
Last :(
{{/if}}
{{/each}}

F. @index the subscript that iterates through the array directly in the template

{{#each array}}
{{@index}}
{{/each}}
        
g. Traversing an object's properties through @key
{{#each array}}
{{@key}}
{{/each}}

    
        

HANDLEBARSJS Study Notes