2013-07-08 34 views
0

在Handlebars.js - 模板中我得到一個senario來檢查數組的值,如果值不等於做一個任務,等於做一個德..我喜歡這個,但它拋出一個錯誤,如何處理這種情況..任何一個幫助我?Handlebars.js - 如何選擇「註銷」值並追加到「div」元素

或者任何人都可以正確處理這個問題。

myJson是:

{ 
     "links":[{"label":"x","link":"x"}, 
    {"label":"y","link":"y"}, 
    {"label":"Logout","link":"Logout"}] 
} 


{{#each links}} 
        {{#if !lable.Logout}} 
        <li> 
         <a href="{{link}}">{{label}}</a> 
         {{#if subLinks}} 
          <ul> 
           {{#each subLinks}} 
            <li><a href="{{link}}">{{label}}</a></li> 
           {{/each}} 
          </ul> 
{{else}} 

<div><a href="{{link}}">{{label}}</a></div> 


        {{/if}} 
      {{/each}} 

回答

1

把手不能單獨處理有條件的if語句,你需要使用一個輔助功能。

<div id="myDiv"></div> 

<script type="text/x-handlebars-template" id="handlebar"> 
{{#each links}} 
    {{#ifCond label "Logout" }} 
    <li> 
     <a href="{{link}}">{{label}}</a> 
     {{#if subLinks}} 
      <ul> 
       {{#each subLinks}} 
        <li><a href="{{link}}">{{label}}</a></li> 
       {{/each}} 
      </ul> 
     {{/if}} 
    {{else}} 
     <div> 
      <a href="{{link}}">{{label}}</a> 
     </div> 
    {{/ifCond}} 
{{/each}} 
</script> 

<script> 
    $(document).ready(function() { 
     var source = $("#handlebar").html(); 
     var template = Handlebars.compile(source); 
     var context = { 
      "links":[ 
       {"label":"x","link":"x"}, 
       {"label":"y","link":"y"}, 
       {"label":"Logout","link":"Logout"} 
      ] 
     }; 
     var html = template(context); 
     $("#myDiv").html(html); 
    }); 

    Handlebars.registerHelper('ifCond', function(v1, v2, options) { 
     if(v1 === v2) { 
     return options.fn(this); 
     } 
     return options.inverse(this); 
    }); 
</script>