[Front-end artifact] handlebars + require basic usage method, handlebarsrequire

[Front-end artifact] handlebars + require basic usage method, handlebarsrequire

I recently saw handlebars on a website. js, Baidu is out of curiosity. This is a magic horse. As a result, I am very happy. So I started to learn it myself. handlebars has several methods, which are quite simple and easy to get down!

The following is a demo of the basic teaching logic with the complete code.

The test cases are divided into three parts: Header, subject, and end:

<div id="header"></div><div class="contact" id="contact"></div><div id="footer"></div>

Let's talk about the content of the id = "contact" subject. The html code will not be pasted. Let's look at it directly:

The handlebars template code is as follows:

<script id="contact-template" type="text/x-handlebars-template">            <div class="tit">{{transformat info}}</div>            {{#tit}}            <span class="one">{{this}}</span> {{/tit}} {{#student}}            <span class="one">{{@index}}</span><span class="one">{{name}}</span><span class="one">{{sex}}</span><span class="one">{{age}}</span><span class="one">{{sheight}}</span> {{/student}}        </script>

Handlebars. registerHelper is used in the '2016 address book 'in the image. The Code is as follows:

Handlebars. registerHelper ("transformat", function (value) {if (value = "Address Book") {return new Handlebars. safeString ("<font color = 'pink '> 2016 address book </font>")} else {return "old Address Book ";}});

Register a helper. The value is the value passed in by the template, which is equivalent to the jq function (), new Handlebars. safeString is used to prevent html tags from being output as text, that is, the difference between html () and text () in jq.

Finally, output the template to the webpage through rendering. The Code is as follows:

$('#contact').html(Handlebars.compile($("#contact-template").html())(data));

If there is a general template, it is called multiple times. The above code can also be written to facilitate the call:

var contact=Handlebars.compile($("#contact-template").html());$('#contact').html(contact(data));

The data is json data, which is customized for convenience:

Var data = {"info": "Address Book", "tit": ["no.", "name", "gender", "Age", "height"], "student": [{"name": "Michael Zhang", "sex": "male", "age": 18, "sheight": "175 "}, {"name": "Li Si", "sex": "male", "age": 22, "sheight": "180" },{ "name ": "niu", "sex": "female", "age": 18, "sheight": "165" },{ "name": "Yuan Shuai", "sex ": "male", "age": 17, "sheight": "173"}]};

The final steps are as follows:

At this point, the basic knowledge of handlebars has been explained, which can meet the needs of daily websites. Of course, handlebars also has some other functions. You can refer to the Chinese manual:

Http://keenwon.com/992.html

How can I split the file header and tail and put them on a separate page for reference? Otherwise, it is impossible to write every page, and it will be troublesome to change it later (of course, if you are using dynamic languages such as php and asp on the front end, you can ignore this part, because I use html + ajax to call api interfaces) Then I can only find new items in Baidu and finally find require text. js, another artifact appeared, the day will be downgraded to the role of the SS, so let's talk about it in a simple way, look at the trick:

Text. js is a plug-in under require. js, which is available in my code.

I split my head and tail into two separate html files, as shown below:

Header.html

<Script id = "header-template" type = "text/x-handlebars-template"> <div class = "header"> <span> homepage </span> <span> contact Us </span> <span> about us </span> </div> </script>

Footer.html

<script id="footer-template" type="text/x-handlebars-template">    <div class='footer'>CopyRight 2015-2016</div></script>

In fact, you can also put it in a file.

The two files are split, and the next step is to reference the files. Therefore, require text. js is about to be released and called first.

<script type="text/javascript" src="js/require.js" data-main="js/main.js"></script>

Data-main actually defines an entry file, which is not described in detail. Refer to the official documentation:
Http://www.bootcdn.cn/require-text/readme/
This is in English. You can use other Baidu documents.
The main. js code is self-written, with the write entry. If you don't talk about anything else, it is related to references. Check the Code:

define(["text!../header.html", "text!../footer.html"], function(header, footer) {    $('#header').html(header);    $('#header').html(Handlebars.compile($("#header-template").html()));    $('#footer').html(footer);    $('#footer').html(Handlebars.compile($("#footer-template").html()));});

Text !.. Text in/header.html! Running.

In this way, the Handlebars. compile rendering template should be placed in the define callback of main. js.

In this way, you can reference the Handlebars template file on any page. When it comes to this, you should understand that the header and tail I just mentioned can be put in a file, the call template is also called Based on the template ID. If there are not many templates, just put a public html file.

All right, let's talk about this. Let's put the complete code that everyone cares about! Byte ~

Http://files.cnblogs.com/files/yuanxiaojian/handlebars_require.rar