最近在某网站看到了handlebars.js，出于猎奇就百度了下这是神马玩意，效果让我非常欢欣，于是就最先自学下，handlebars就几个要领，蛮简朴，言归正传！

以下是基础教授教养逻辑演示，会附完全代码

测试案例就分为3大块，头、主体、尾：

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

先来讲讲id=”contact”主体有些什么内容，html代码就不贴了，直接看下图：

handlebars的模版代码以下：

<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>

图片中的‘2016通讯录’用到了handlebars.registerHelper，代码以下：

Handlebars.registerHelper("transformat", function(value) {
 if(value == "通讯录") {
                    return new Handlebars.SafeString("<font color='pink'>2016通讯录</font>")
                } else {
                    return "old通讯录";
                }
            });

注册一个helper，value是模版传进来的值，相当于jq的function()，new Handlebars.SafeString是为了防备把html标签输出为文本情势，就是jq下html()和text()的区分。

末了经由过程衬着将模版输出到网页，代码以下：

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

假如有通用模版，就是一个模版要挪用屡次，上面的代码也能够如许写，轻易挪用：

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

个中的data就是json数据，为了轻易就自定义了：

var data = {
                "info": "通讯录",
                "tit": ["序号", "姓名", "性别", "岁数", "身高"],
                "student": [{
                    "name": "张三",
                    "sex": "男",
                    "age": 18,
                    "sheight": "175"
                }, {
                    "name": "李四",
                    "sex": "男",
                    "age": 22,
                    "sheight": "180"
                }, {
                    "name": "妞妞",
                    "sex": "女",
                    "age": 18,
                    "sheight": "165"
                }, {
                    "name": "袁帅",
                    "sex": "男",
                    "age": 17,
                    "sheight": "173"
                }]
            };

末了效果图以下，实在和方才谁人主体一样，就是自始自终罢了：

到这里实在handlebars的基础知识就解说完了，已能满足一样平常网站的需求，固然handlebars另有其他的一些功用，能够参考中文手册：

http://keenwon.com/992.html

未完待续，然后文件的头和尾怎么能拆分出来放在零丁的页面中来援用呢？不然不可能每一个页面都写一遍，今后要改就麻烦了（固然假如你前端用的是php、asp之类的动态言语，那末一下部份能够疏忽不看，由于我用的是html+ajax来挪用api接口的）然后只能百度新的东西，终究找到了require text.js，又一神器涌现，天将降大任于斯人也，那末简朴再来说说，看招：

text.js是require.js下的一个插件，我代码里都有。

我把头和尾拆分为两个零丁的html文件，以下：

header.html

<script id="header-template" type="text/x-handlebars-template">
    <div class="header"><span>首页</span><span>联络我们</span><span>关于我们</span></div>
</script>

footer.html

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

实在放在一个文件中也行，到时刻本身体味。

两个文件拆分了，接下来就是援用的，那末require text.js就要出马了，先挪用下。

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

data-main实际上是定义了一个进口文件，这个就不细说了，参考官方文档：

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

这个是英文的，人人能够自行百度其他文档。
main.js的代码是本身写的，写进口，其他的不多说了，就说和援用有关的，看代码：

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!../header.html中的text!示意把header.html文件援用进来以文本的情势，横竖就是类似于php的include、require，把header.html和footer.html援用到index.html中。

如许一来，Handlebars.compile衬着模版就要放在main.js的define回调中去。

如许就可以在任何页面援用Handlebars模版文件了，说到这，人人应该会邃晓我刚说的头和尾能放一个文件中吧，挪用模版也是依据模版的ID挪用，假如模版不多，放一个公用html文件就好。

好了，空话就说到这了，放上人人心心念念的完全代码了！拜~

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

本日过来更新下代码，关于requirejs的，模块化了js的治理和一些公用文件，修改较大，不邃晓能够参考官方文档，这里就不再引见了，直接上代码了！2017-01-11

http://files.cnblogs.com/files/yuanxiaojian/handlebars_requirejs.rar

注重：要搭建当地环境后阅读，直接翻开没内容，json之类的读取不到，这类末了用的时刻肯定是服务器环境，小白不会搭建的话直接百度下载个phpstudy装置就好。