如何使用handlebarjs

Question

我嘗試使用handlebarjs。請在下面找到下面的鏈接我的預期產出的創建樹形菜單模板來創建HTML列表模板，

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" 
    } 
];