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  很清晰的说明了使用方法 ，对应相对的使用情景