Handlebars Customizing helper wording

Handlebars relative to a lightweight, high-performance template engine, because of its simple, intuitive, non-polluting features of HTML, I personally particularly like. On the other hand, handlebars as a logicless template, does not support particularly complex expressions, statements, only built-in some basic syntax, like if, each of these. Unfortunately, even if are very weak, can only judge whether the value is true/false, or whether it is true/false after conversion, can not be compared to the value. However, handlebars provides the ability to customize the helper, which allows for very rich functionality through custom helper. This article summarizes the methods of handlebars registered helper and some related knowledge.

Helper can be divided into two categories, one is to format the output data, used like this: {{formatdate date}}, the official did not give the name, I call it simple helper. Another class called Block-level helper, block-level helper has its own scope, you can get contextual data, and can define the content of the rendering, you can play a more important role. These two types of helper,handlebars can be extended by a weakly logical template to be powerful. With the Registerhelper method, we can register a helper. Let's look at the simple helper below.

Simple Helper

Simple helper is used primarily to format data, for example we often format dates, numbers, amounts, and so on. See an example to understand, here I write a digital division of the helper, the so-called thousand division is to 123456789 such value format as 123,456,789. The code is as follows:

function (num, options) {          = num + ';           return num.replace (/(? = (?! ^)(?:\ D{3}) + (?: \.| $)) (\d{3} (\.\d+$)?) /g, ', $ ');     });

Then you can use it in the template:

{{FormatNumber num}}

The first parameter of Registerhelper is the name of the helper, I call it formatnumber here, the second argument is a function, the first parameter passed in is the value we used when we use the helper, such as Num above, and finally, The content of the function return is the output from our template. It also passes in the second parameter options,options is an object that contains some context-sensitive information, but is not available in a simple helper, and we'll say it in detail below in block-level helper.

The definition of a simple helper is as simple as the name ~

Block-level Helper

The ability to block-level helper is much more powerful, you can implement some of the iterators you want, or enhance judgment statements. The main thing to rely on is the options parameter. Here is an example to illustrate.

Handlebars If statements can only be true/false judged, if we want to determine whether a number is even, I write this is not possible: {{#if num%2 = = 0}},if does not support expressions, and does not support operators such as = =. So to judge an even number in a template, we need to define a helper. The code is as follows:

//determine if an even number isHandlebars.registerhelper (' If_even ',function(value, Options) {Console.log (' Value: ', value);//Value:2Console.log (' This: ', This);//this:object {Num:2}Console.log (' fn (this): ', Options.fn ( This));//fn (This): 2 is an even number    if((value% 2) = = 0) {        returnOptions.fn ( This); } Else {        returnOptions.inverse ( This); }});

Then we build a data and write it in the template to see:

var data3 = {    2}

In the template:

{{#if_even num}}      {{this. num}} is an even number {{else}}      {{this. num}} is an odd number {{/if_ Even}}

The result is that the output "2 is even". By the data in the code log out, you can see that this can be taken to the current context body, here is our well-defined data object. Another important thing is the Options.fn method, which can compile your incoming context body into a template and return the compiled result, and in the helper we pass this in, so we can refer to it in the template. The final Options.fn returns the compiled result: 2 is an even number. In fact, you can also pass in other context objects for OPTIONS.FN, for example, if you want to write an iterator, you can pass the elements of the array in sequence.

Here we also see another method, Options.inverse, which is to take the opposite meaning, corresponds to the {{else}} tag in our template, it compiles the contents of {{else}} and returns the result, and if we need the else logic in our helper, use it.

Block-level helper starts with "#" when it's used, and has Terminator, which is {{/if_even}} above

Helper that receives multiple parameters

Custom helper can pass in more than one parameter, as long as it is written in Registerhelper's function, see the following example.

Since the handlebars built-in if statement is too weak, sometimes we need to judge the logic like = =,! =, >, <, you have to write your own definition helper. This helper needs to pass in both the left and right operands and the operator, with more than one parameter. The following compare was copied from somewhere else, and I used the most in the project:

Handlebars.registerhelper (' compare ',function(left, operator, right, options) {if(Arguments.length < 3) {           Throw NewError (' Handlerbars Helper ' compare "needs 2 parameters '); }         varOperators = {           ' = = ':function(L, R) {returnL = =R;},' = = = ':function(L, R) {returnL = =R;},'! = ':function(L, R) {returnL! =R;},'!== ':function(L, R) {returnL!==R;},' < ':function(L, R) {returnL <R;},' > ':function(L, R) {returnL >R;},' <= ':function(L, R) {returnL <=R;},' >= ':function(L, R) {returnL >=R;},' typeof ':function(L, R) {return typeofL = =R;}         }; if(!Operators[operator]) {           Throw NewError (' Handlerbars Helper ' compare "doesn\ ' t know the operator ' +operator); }         varresult =Operators[operator] (left, right); if(Result) {returnOptions.fn ( This); } Else {           returnOptions.inverse ( This); }     });

View Code

This is the case when used:

{{#compare people.name ' = = ' ' Peter '}}     His name is Peter {     else}}     his name is not Peter {{/compare}}

You can see that the parameters passed in the template correspond to left, operator, options in the helper definition in turn. Options.inverse is also used in the definition to handle the logic of else.

Pass hash parameter to helper

When using helper in a template, we can also pass some variable arguments to the helper, called hash parameters, which can be processed by Options.hash in helper. The flexibility and reusability of this helper is greatly enhanced. Let's just say, for example.

Defines a helper named list, which is the function of looping through the data and wrapping the data in the Ul>li tag. At the same time, in order to add different classes to the element, I pass the class name as a hash. The helper code is as follows:

function (items, options) {    var out = ' <ul> ';      for (var i=0, l=items.length; i<l; i++) {        var item = Options.fn (items[i]);        = out + ' <li class= "' +options.hash.class+ '" > ' + Item + ' </li> ';    }     return out + ' </ul> ';});

In the template, I used the list two times and passed in different hash values:

{{#list people class= "Green"}} {{FirstName}}-----{{lastname}}{{/list}}{{#list people class= "Red"}}{{firstname}}-----{{lastname}}{{/list}}

Define the following data to do the testing:

var data = {    people: [        "Yehuda", LastName: "Katz"},        "Carl", LastName: "Lerche" },        "Alan", LastName: "Johnson"}    ]}

The nodes that are generated on the final page are as follows:

　　

This allows us to reuse the same helper and accomplish a more flexible task. See here, do not think the helper is very strong, using the above features, we can write a very rich function, enough to meet the development needs.

Other

There is also a two-point tip, which is added here:

1. Helper's destruction

Call Handlebars.unregisterhelper (' list ') to destroy a helper

2. Registering multiple helpers at a time

Andlebars.registerhelper ({    function() {},    function() {}});

Handlebars as a static template engine of weak logic, it is simple and easy to use, not too much redundancy, but also provides a strong extensibility, which is why I like it. Hope that through this article can let you know more about handlebars helper, began to like it.

Handlebars Customizing helper wording