Handlebars.js條件語句

我試圖在我的Handlebars模板中執行條件語句。問題在於，如果插入if條件，它根本不呈現內容。Handlebars.js條件語句

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Handlebars.js example</title> 
</head> 
<body> 
    <div id="placeholder">This will get replaced by handlebars.js</div> 
    <script type="text/javascript" src="handlebars.js"></script> 
    <script id="myTemplate" type="text/x-handlebars-template"> 



     {{#names}} 
     <div style="width:100%;border:2px solid red;"> 
     <table style="width:100%;border:2px solid black"> 
      <tr> 
       <td style="width:50%; border:2px solid yellow;"> 
         <img src="{{itemImage}}"></img> 
       </td> 
       <td style="width:50%; border:2px solid green;"> 

         <img src="btn_downloadAudio.png"></img><br><br> 

         <img src="btn_downloadPresentation.png"></img><br><br> 
         <img src="btn_downloadTranscript.png"></img><br><br> 
         <img src="btn_downloadVideo.png"></img><br><br> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"><img src="{{itemType}}">&nbsp; 
       <label style="font-weight:bolder">{{itemTitle}}</label> 
       </td> 
      </tr> 
      <tr> 
      <td colspan="2"> 
        <p>{{itemDescription}}</p> 
       </td> 
      </tr> 
     </table> 
     </div> 
     {{/names}} 

    </script> 
    <script type="text/javascript"> 
     var source = document.getElementById("myTemplate").innerHTML; 
     var template = Handlebars.compile(source); 
     //alert(template); 

     var data = { 
      names: [ 
      { "itemImage": "authorImage.png", 
       "itemTitle": "Handlebars.js Templating for HTML", 
       "itemType": "icon_document.png", 
       "isAudioAvailable": "true", 
       "isPresentationAvailable": "true", 
       "isTranscriptAvailable": "true", 
       "isVideoAvailable": "false", 
       "itemDescription": "Rendeting HTML content using Javascript is always messy! Why? The HTML to be rendered is unreadable. Its too complex to manage. And - The WORST PART: It does it again and again and again! Loss: Performance, Memory, the DOM has to be re-drawn again each and every time a tag is added."} 
      ] 
     }; 

     document.getElementById("placeholder").innerHTML = template(data); 

    </script> 

</body> 
</html>

條件：顯示視頻按鈕，如果isVideoAvailable是真的

任何幫助表示讚賞。

感謝， ANKIT

來源

2013-07-11 Ankit Tanna

似乎工作正常：http://jsfiddle.net/ambiguous/DAHKY/ –

@ muistooshort是的，渲染很好。我只想在「isVideoAvailable」==「true」的情況下渲染視頻按鈕。如果它是假的，我想隱藏它。這可以做到嗎？ –

如果要有條件地顯示一些東西，你用一個{{#if}}：

{{#if isVideoAvailable}} 
    <img src="btn_downloadVideo.png"><br><br> 
{{/if}}

當然，對於能夠正常工作，您的數據應該是有意義和isVideoAvailable應一個布爾值。因此，您還需要清理數據纔有意義，isVideoAvailable應該是true或false而不是字符串'true'或'false';預處理您的數據在Handlebars中很常見，因此修復您的數據將是最好的選擇，修復您的數據還可以讓您以自然的方式在JavaScript中使用它。

演示：http://jsfiddle.net/ambiguous/LjFr4/

但是，如果你堅持留下您的布爾值作爲字符串，那麼你可以添加一個if_eq助手說：

{{#if_eq isVideoAvailable "true"}} 
    <img src="btn_downloadVideo.png"><br><br> 
{{/if_eq}}

清理你的數據將是一個更好的主意。

來源

2013-07-11 18:21:23

它工作得很好。：）非常感謝。 –

我無法將if_eq幫助器用於字符串類型。它在布爾中工作，但不適用於字符串類型的數據。 :( –

@AnkitTanna：當你在字符串中使用if_eq時發生了什麼，你是如何使用它的？ –

Handlebars.js條件語句

回答

相關問題