Detailed Handlebars+require basic use method _jquery

Recently in a website saw handlebars.js, out of curiosity on the Baidu under this is God horse gadgets, the result let me very happy, so began to self-study, handlebars on a few methods, quite simple, to the point!

Here is a basic instructional logic demo that will be accompanied by a complete code

The test case is divided into 3 chunks, head, body, tail:

<div id= "header" ></div>
<div class= "Contact" id= "Contacts" ></div>
<div id= " Footer "></div>

First speaking id= "contact" The main body of what content, HTML code will not be posted, directly look at the following figure:

The handlebars template code is as follows:

<script id= Contact-template type= text/x-handlebars-template >
 <div class= >{{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>

The ' 2016 Address Book ' In the picture uses the Handlebars.registerhelper code 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,value is a template to pass in the value, the equivalent of JQ function (), new handlebars.safestring is to prevent the HTML tag output as text form, is JQ under the HTML () and text () difference.

Finally, by rendering the template output to the Web page, the code is as follows:

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

If there is a generic template, is a template to call multiple times, the above code can be written to facilitate the call:

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

The data is JSON and is customized for convenience:

var data = {
 "info": "Address Book",
 "tit": ["Serial number", "Name", "Gender", "age", "height"],
 "student": [{
  "name": "John",
  "sex": "Male",
  "age": "
  sheight": "175"
 }, {
  "name": "Dick",
  "sex": "Male", "Age
  ":
  " Sheight ":" 180 "
 }, {"
  name ":" Girl ",
  " sex ":" female ",
  " age ":,
  " Sheight ":" 165 "
 }, {
  " Name ":" Yuan Shuai ","
  Sex ":" Male ",
  " age ":", "
  sheight": "173"
 }]
 };

The final effect figure is as follows, in fact, just like that subject, is manage only:

Here in fact, the basic knowledge of handlebars, has been able to meet the needs of the daily Web site, of course, handlebars there are some other functions, you can refer to the Chinese manual:

Http://keenwon.com/992.html

To be continued, then how can the head and tail of the file be split out and placed on a separate page for reference? Otherwise it's impossible to write every page, later to change on the trouble (of course, if you are using the front-end PHP, ASP, such as dynamic language, then the part can be ignored, because I use Html+ajax to invoke API interface) and then only Baidu new things, finally found the require Text.js, another artifact appears, the sky will drop big Ren Also, so simple again say, see Recruit:

Text.js is a plugin under Require.js, which I have in my code.

I split the head and tail into two separate HTML files, as follows:

Header.html

<script id= "Header-template" type= "text/x-handlebars-template" >
 <div class= "header" ><span> Home </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, put in a file is also OK, then I experience.

Two files split, the next is quoted, then require Text.js will be the horse, first call under.

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

Data-main actually defines a portal file, this is not in detail, refer to the official documentation:

http://www.bootcdn.cn/require-text/readme/

This is in English, we can own other documents Baidu.

Main.js's code is written by itself, write the entrance, the other not to say more, say and reference, see 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!.. The text! in/header.html refers to header.html file references in the form of text, which is similar to PHP's include, Require, Refer header.html and footer.html to the index.html.

In this way, the Handlebars.compile render template will be placed in the Main.js define callback.

This can be in any page reference handlebars template file, to this, we should understand that I just said the head and tail can put a file, call template is based on the template ID call, if the template is not much, put a public HTML file is good.

OK, nonsense on this, put on everyone actually complete code! Bye ~

Full code download Address: Http://wd.jb51.net:81//201612/yuanma/handlebars_require_jb51.rar

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!