<!-- 建立一个展现数据的容器section //-->

<section id="tutorial">

</section>

<!-- 导入jQuery类库 //-->



<script type='text/javascript' src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js">
</script>




<!-- 导入handlebars 相干JS //-->
<script type='text/javascript' src="http://www.gbtags.com/gb/networks/uploads/87c22f7e-b475-4837-b781-eb74ae423041/js/handlebars-v1.3.0.js"></script>

<!-- 定义handlebars的模板  //-->


<script type="text/x-handlebars-template" id="tutorial-template">
  <h1>{{title}}</h1>
  <p>{{author}}</p>
  <div>{{intro}}</div>
  <div>{{{type}}}</div>
    {{! 注重：修正双大括号为三大括号封闭HTML转义 － 此处为模板代码解释 }}
  {{{generateContent this}}}
   {{#listTutorials tutorials}}
    {{title}} － 课程时长：{{duration}}分钟
  {{/listTutorials}}

   {{! 以下运用handlebars内建的辅佐要领each来轮回猎取课程目次 }}
  {{#each tutorials}}
    {{! 注重在each块表达式中当前的条理是list属性对应这层 }}

    <p>
      {{title}} - 课时：{{duration}}分钟 | 讲师：{{../info.author}}
       
    </p>
    {{/each}}
{{! 运用each来轮回课程信息对象属性 }}
{{#each author}}
<li>{{@key}}：{{this}}</li>
    {{/each}}
     {{#with author}}
 作者：{{lastname}} {{firstname}}
 {{/with}}
  {{#if author}}
 作者：{{author.lastname}} {{author.firstname}}
 {{! if也能够合营else运用，以下 }}
 {{else}}
 作者：无
 {{/if}}
 {{log 'hello , gbtags.com'}} 
  {{! 运用each来轮回猎取课程列表数组 }}
  <ul>
  {{#each tutoriallist}}
    <li>
    {{! 这里运用@index能够猎取数组的索引index }}
    编号 {{@index}} ： {{title}} - {{duration}}分钟
    </li>
  {{/each}}
  </ul>


</script>





<

script>
Handlebars.registerHelper('generateContent', function(jsondata) {

  //以下组装页面须要展现的HTML内容
        var content = 
           '

<h1>' + jsondata.title + '</h1>

'
           + '

<p>' + jsondata.author + '</p>

'
           +  '

<div>' + jsondata.intro + '</div>

';

        return content;
});

Handlebars.registerHelper('listTutorials',function(items, options) {

  var out = "

<

ul>";

  for(var i=0;i<items.length;i++){
    out += "<li>" + options.fn(items[i]) + "</li>"; //注重这个options有个属性fn，能够用来直接挪用模板
  }

  return out + "</ul>";
});
$(function(){
        var jsondata = {
                          'title':'handlebars运用入门', 
                          'author': 'gbtags.com',
                          'intro': '基本JS模板引擎handlebars的初学者指南',
                          'type': '<span class="au"hot>双大括号会自动转义HTML代码，而三括号则不转义HTML</span>',
                           //下面定义一个新的数组属性tutorials
                          'tutorials':[
                            {'title': '第一节：handlebar基本','duration':'5'},
                            {'title': '第二节：handlebar 表达式','duration':'3'},
                            {'title': '第三节：handlebar 辅佐要领','duration':'1'},
                            {'title': '第四节：handlebar 内建辅佐要领','duration':'6'}
                          ],
          'author': {
              'firstname': 'terry',
              'lastname': 'li'
            },
           tutoriallist: [
             {title:'Handlebars引见',duration: 5},
             {title:'Handlebars基本',duration: 3},
             {title:'Handlebars内建块表达式',duration: 2},
             {title:'Handlebars现实案例',duration: 8}
           ]
          };
         // 猎取模板中定义的HTML构造
         var source = $("#tutorial-template").html();

         // 编译HTML天生对应的JS模板
         var template = Handlebars.compile(source);

         // 运用JS模板处置惩罚须要显现的JSON数据, 天生对应的HTML内容
         var html = template(jsondata);

         // 增加天生的HTML内容到对应页面元素中
         $('#tutorial').html(html);
});

 /*
  *总结：
  *能够看到运用handlebars来天生对应页面内容，只须要定义一个HTML模板
  *经由过程handlebar来猎取HTML模板而且编译成JS模板，末了处置惩罚数据成为页面内容
  *模板保护更新异常简朴，而且代码清晰易于浏览，异常合适开辟庞杂逻辑的页面
  */
</script>

via :gbtags