Handlebars 新手使用

昨天抽空看了一下关于Handlebars的基础使用，从开始写asp.net 用视图引擎，到写web 的时候，都是用AJAx 来接受并分析数据，然后用拼接的方式，或者追加的方式来实现在页面中的数据展示，今天用 Handlebars　来实现同样的事情。（关于这些，还是不太清楚，有空还是需要多看看　关于前端的知识。。）

引用头文件

先说基础的使用　跟用ＪＳ插件一样，都是要用到引用文件：

<script src="Scripts/jquery-1.10.2.min.js"></script>

<script src="Scripts/handlebars.min.js"></script>

当然　Handlebars　的使用还是　基于jQ的语法来使用的。也很明了只需要引用两个文件。

使用起来也是很容易理解我自己的理解 Handlebars 是分为了两个一个是模板块，一个就是 js 方法+数据源块。

模板块

现实个这个模板块一个 ID 用来以后JQ 拿到咱们所写得模板。看代码：

<script id="table-template" type="text/x-handlebars-template">

    {{#each student}}

            <tr>

                <td>{{@index}}</td>

                <td>{{name}}</td>

                <td>{{sex}}</td>

                <td>{{age}}</td>

                <td>{{{homePage}}}</td>

            </tr>

    {{/each}}

</script>

先说 {{}} 就是模板格式相当于 html里面的<> 一样同样有{{/}} , 然后就是 #each 循环的意思，Razor视图引擎的话那就完全没有难度了

其实就跟那个差不多{{}}中写的代码，其余部分用来写

标签 #each student 循环获取其中的 key的值放在<tr>中

在td中包含的就是 JSON数据的 KEY ，{{@index}}这个是 Handlebars js中的一个变量用来显示序号

这时候我就有个疑问当是JSON 的是话最外层是没有Key 的那如何用来指这个JSON串，根据经验 this 用于这种情况， this就指当前

填充模板块

填充模板，很简单易懂就是根据id拿到对应的模板块，然后获取指定的父节点填充html

<script type="text/javascript">

    $().ready(function () {

        var data = {

            "student": [

                {

                    "name": "张三",

                    "sex": "0",

                    "age": 18,

                    "homePage": "<a href='javascript:void(0);'>张三的个人主页</a>"

                },

                {

                    "name": "李四",

                    "sex": "0",

                    "age": 20,

                    "homePage": "<a href='javascript:void(0);'>李四的个人主页</a>"

                },

                {

                    "name": "王五",

                    "sex": "1",

                    "age": 30,

                    "homePage": "<a href='javascript:void(0);'>王五的个人主页</a>"

                }

        ]};

　　　　　　//获取 对应的模板块

        var myTemplate = Handlebars.compile($("#table-template").html());

　　　　　　//在父节点填充  模板块并 给模板块赋值

        $("#tableList").html(myTemplate(data));

    });

</script>

上面这段代码除了模拟的data 数据之外就剩下两句话，在其中注释解释过，然后运行就可以看到自动填充的数据。

填充模板块内容很少，需要处理的还是模板块的内容，根据数据的结构来用#each 循环获取其中的值。

当然模板块不是只有#each ，还有 if 语句，不过本人并不推荐使用，因为很难用，可以用另外一个东西代替：

        Handlebars.registerHelper("compare", function (name, options) {

            if (name == "李四") {

                return options.fn(this

                );//就代表 执行结果为True

            }

            return options.inverse(this);//代表执行结果为False

        });

可以在 JQ 中用他的Helper 方法，来声明一个函数，用来实现判断，

可以看出有两个参数第一个参数是需要传入值，第二个参数代表该方法为块方法就是{{#compare 参数1}}{{/compare}} 或许会有些不清晰看：

    {{#each student}}

        {{#compare name}}

            <tr>

                <td>{{@index}}</td>

                <td>{{name}}</td>

                <td>{{sex}}</td>

                <td>{{age}}</td>

                <td>{{{homePage}}}</td>

            </tr>

           {{else}}

                <tr> 查无此人 </tr>

        {{/compare}}

    {{/each}}

上面就是 compare 套到模板中的方式。

第二个参数代表该方法为块方法就是{{#compare 参数1}}{{/compare}} ，

如果去掉Options 这个参数就是一个行内方法， {{方法名 name}} 直接返回需要的值，就能填充到该位置

以上就是我对 Handlebars 的基础使用做的总结，如果有疑问，使用方法不明确欢迎讨论哦！

参考网站：http://www.cnblogs.com/iyangyuan/p/3471227.html 很清晰的说明了使用方法，对应相对的使用情景