如何使用handlebarjs创建HTML列表模板

Question

我尝试使用handlebarjs创建树状菜单模板。请在链接下面找到我预期输出的下方，

http://imgur.com/twqlQgD

但浏览器视图为空。我是handlebarjs的新手。请告知如何归档输出。

Html文件（index.html）

                       <script id="sample-template" type="x-handlebars-template">​
                       <!--Heading-->
                     <div class="col-md-12">
                      <span class="fb_options_head">{{label}}</span>
                    </div>
                    <!--List of items-->

                    {{#bin}}
                    <ul>
                    <li><input type="checkbox"/>{{label}} ({{cndocs}})</li>
                   </ul>                        
                    {{/bin}}
                    </script>

脚本文件（Script.js）

$(function  () {
  var sampleData = [{

        "label": "Heading 1",
        "bin": [{
            "state": "lobBin==text 1",
            "label": "text 1",
            "cndocs": 2,
            "ndocs": 2
        }, {
            "state": "lobBin==text 2",
            "label": "text 2",
            "cndocs": 3,
            "ndocs": 1
        }, {
            "state": "lobBin==text 3",
            "label": "text 3",
            "cndocs": 4,
            "ndocs": 1
        }],
        "bs-id": "lobBin"
},
{"stateBin": {
        "label": "State",
        "bin": [{
            "state": "stateBin==Paragrph 1",
            "label": "Paragrph 1",
            "ndocs": 1
        }, {
            "state": "stateBin==Paragrph 2",
            "label": "Paragrph 2",
            "ndocs": 1
        }, {
            "state": "stateBin==Paragrph 3",
            "label": "Paragrph 3",
            "ndocs": 2
        }],
        "bs-id": "stateBin"
    }
}];
    var theTemplateScript = $("#sample-template").html(); 
​    var theTemplate = Handlebars.compile (theTemplateScript); 
    $(".shoesNav").append (theTemplate(sampleData)); 
});

Answer 1

<div class="container-fluid">
<script id="sample-template" type="x-handlebars-template"> 
         {{#each this }}
     <div class="col-md-12">
         <span class="fb_options_head">{{label}}</span>
     </div> 
     <ul>
         {{#each bin }}
             <li><input type="checkbox"/>{{label}}  ({{cndocs}})</li>
          {{/each}}
     </ul>
     {{/each}}
     </script>
 </div>   
 <div class="shoesNav">
 </div>
 </div>

$(function  () {
  var sampleData = [{

        "label": "Heading 1",
        "bin": [{
            "state": "lobBin==text 1",
            "label": "text 1",
            "cndocs": 2,
            "ndocs": 2
        }, {
            "state": "lobBin==text 2",
            "label": "text 2",
            "cndocs": 3,
            "ndocs": 1
        }, {
            "state": "lobBin==text 3",
            "label": "text 3",
            "cndocs": 4,
            "ndocs": 1
        }],
        "bs-id": "lobBin"},
      {
        "label": "State",
        "bin": [{
            "state": "stateBin==Paragrph 1",
            "label": "Paragrph 1",
            "ndocs": 1
        }, {
            "state": "stateBin==Paragrph 2",
            "label": "Paragrph 2",
            "ndocs": 1
        }, {
            "state": "stateBin==Paragrph 3",
            "label": "Paragrph 3",
            "ndocs": 2
        }],
        "bs-id": "stateBin"
    } 
];