Why use a template engine?

The e reason for using a template engine, as I always tell my students, is that you don’t have to reinvent the wheel.


Simply speaking, the most essential role of the template is to “change static for dynamic”, all conducive to this aspect are advantages, are not conducive to the disadvantage.
In order to achieve the goal of “change from static to dynamic”, there are several points:
1. Maintainability (easy to change later);
2. Scalability (it is convenient to increase functions and requirements);
3. Improved development efficiency (better program logic organization and convenient debugging);
4. Look comfortable (not easy to write wrong);
From the above four points, the advantages of the front-end template engine are not one or two points.
In fact, the most important point is:
Separation of view (including display rendering logic) from program logic, there are too many benefits of separation, such as the later maintenance of modified code, code addition, debugging code, and application development mode (MVC, MVVM) are much convenient.


Reasons for choosing Handlebars

1. The world’s most popular template engine

Handlebars is the most used template engine in the world, so Handlebars is definitely the most popular template engine in the world.
Handlebars has been introduced in many front-end frameworks, such as MUI and AmazeUI, where Handlebars are recommended.
AmazeUI, for example, provides a compilation template for its Handlebars specifically for Web components in its documentation

2. Simple grammar

The basic syntax of Handlebars is extremely simple: wrap the data around {{value}}, and Handlebars automatically matches the value and object of the response. Here is a simple template:

Use Handlebars

1. Download the Handlebars

Download via Handlebars:http://handlebarsjs.com./installation.html
Download via NPM:npm install –save handlebars
Download via Bower: bower install –save handlebars
Download via Github:https://github.com/daaain/Handlebars.git
Through CDN:https://cdnjs.com/libraries/handlebars.js

2. Introduce the Handlebars

This is done with the

3. Create a template

  1. Step 1: Wrap the required template in a
  2. Step 2: Fill the
  • The type can be any MIME type other than text/javascript, but type=”text/template” is recommended to be more semantic
  • The ID is used later during compilation to let the compiled code find the template.
  1. Step three: insert the HTML code we need in the


4. Compile templates in JS code

Take the code above as an example:
  1. Step 1: Get the contents of the template and put them into the TPL, where $(“#myTemplate”) is the same id you used to create the template in the previous step.
    1. Remind: I’m using jQuery’s selector here, but of course you can use native javascript’s DOM selector, such as docuemnt.getelementByid (‘myTemplate’) and Document.querySelector (‘#myTem ‘) plate’)
  2. Step 2: Precompile using the handlebars.compile () method, which passes in the obtained template as an argument
  3. Step 3: Compile using the template() method to produce a concatenated string. The parameters passed to this method are the template precompiled in the previous step
  4. Step 4: Insert the compiled string into the desired HTML document, using the HTML () method provided by jQuery. You can also use native innerHTML

Four. The actual use of 5 commonly used functions

1.Templates

Once you’ve plugged into the library, we can have fun writing templates. The recommended way is to add templates with a special type of script tag. The Type attribute is very important, otherwise browsers will interpret them as javascript parsing.
Templates have an easy-to-understand syntax and can use HTML, plain text, and expressions, which are usually enclosed in two or three pairs of curly braces and can contain variables or function functions. Templates need to be compiled before they can be used, as shown in the code below. Note that we used jquery only to facilitate DOM manipulation, and handlebars can work well without jquery.

2. Expressions

In the example shown above, any HTML code in the expression is automatically ignored, which is a very useful feature, but sometimes we need to parse the HTML, so we use three curly braces {{{}}}, as shown below.
In addition, handlebars expressions allow nested values, making it easy to access any value of a javascript object.

3. Context

Handlebars takes advantage of Mustache’s powerful features, and Context is one of them. We can put the data we need to pass into this javascript object, and use #each, #with, and other methods to easily use this object’s data. Look at the following case, that makes sense

4. Helpers

Handlebars does not allow javascript in templates. Instead, Handlebars provides a list of helpers that can be called within templates to facilitate code reuse and complex template creation. The format for calling helpers with expressions is similar to {{helperName}}, and you can also pass arguments to {{helpName 12345}}.
To develop a new helper, use registerHelper function. The following code shows how to create new function functions. How to use built-in function functions

5. Block helpers

Block helpers work like regular function functions, but with start and end tags (like the built-in #if, #each, etc.) that allow you to modify the content of your HTML. Creation was a little more complex and more powerful at the time. Use them frequently to reuse functions, create large chunks of REUSABLE HTML, and so on.
Using the same Handlebars. RegisterHelper () to create block helper, the difference is we need to use the second parameter, the callback function. Look at the code below
Now that you have a basic idea of what handlebars can do, you can also get more examples and official documents from handlebars
Address: http://handlebarsjs.com/

The last

Template engine is a necessary knowledge we do front-end development, for our rapid development and make more sound excellent code is helpful. I talked about how to write good Javascript code in 8 Tips to Make it easy to Write Good Javascript code, you can go to have a look.