刚接触 Handlebars 问下如何将 Ajax 的数据与外部 Handlebars 模板绑定，然后再插入到页面中~

Question

我有一共有三个文件：

//- 模板文件
menu.hbs


<script id="template" type="text/x-handlebars-template">
{{#each this}}
    <h3>{{title}}</h3>
    <div>{{content}}</div>
{{/each}}
</script>



//- JSON数据
menu.json
[{
    "title": "统计报表",
    "content": "统计报表的内容~"
},{
    "title": "活动统计",
    "content": "活动统计的内容~"
},{
    "title": "店铺统计",
    "content": "店铺统计的内容~"
}]

//- 页面入口文件
index.html


<div class="wrapper" id="wrapper"></div>

我自己的思路是这样子的，我先 ajax 请求加载进来 json 数据，成功之后，再 ajax 请求 Handlebars 模板，再用前的 json 数据与 模板进行绑定，最后插入到页面中~

感觉很别扭，不知道是否正确~

Answer 1

模板文件可以直接放在html里面的

Answer 2

javascript$.when(/*请求数据*/, /*请求模板*/).done(function(a1,  a2){
  // 预编译，加入数据，插入dom
});

Answer 3

模板文件既可以放到js里面，也可以放到html文件里面或者单独的文件。

js里面就是字符串：

'{{#each this}}' +
'    <h3>{{title}}</h3>' +
'    <div>{{content}}</div>' +
'{{/each}}' 

html里面就是你上面写的那种：

单独文件就要异步请求： 可以使用上面那个朋友的 $.when方法，或者现在es6的promise。

Answer 4

和你所说基本一样，结合你的代码大致实现如下：

$.getJson('menu.json',function(res){
    if(res.rtnCod == '00000000'){
        var tpl = Handlebars.compile($('#template').html());
        var html = tpl(res);
        $('#wrapper').html(html);
    }
)

数据和模板直接分离，x-handlebars-template建议直接写到html里面。