Handlebars.js条件声明

Question

I am trying to execute a conditional statement in my Handlebars template. 我试图在我的Handlebars模板中执行条件语句。 The issue is it is not rendering the content at all if an if condition is inserted. 问题是如果插入if条件，则根本不呈现内容。

Here is my code: 这是我的代码：

<!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>

CONDITION: Display Video Button if the isVideoAvailable is true 条件：如果isVideoAvailable为true，则显示视频按钮

Any help is appreciated. 任何帮助表示赞赏。

Thanks, Ankit 谢谢，Ankit

Answer 1

If you want something to be displayed conditionally, you use an {{#if}} : 如果您想要有条件地显示某些内容，请使用{{#if}} ：

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

Of course for that to work properly, your data should make sense and isVideoAvailable should be a boolean value. 当然，为了使其正常工作，您的数据应该是有意义的，并且isVideoAvailable应该是一个布尔值。 So you'll also need to clean up your data to make sense and isVideoAvailable should be true or false rather than the strings 'true' or 'false' ; 所以你还需要清理你的数据isVideoAvailable意义， isVideoAvailable应该是true或false而不是字符串'true'或'false' ; preprocessing your data is quite common with Handlebars so fixing your data would be the best thing to do, fixing your data would also let you use it in a natural manner in JavaScript. 预处理数据在Handlebars中很常见，因此修复数据是最好的办法，修复数据也可以让你以自然的方式在JavaScript中使用它。

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

But, if you insist on leaving your boolean values as strings then you could add an if_eq helper and say: 但是，如果你坚持将你的布尔值保留为字符串，那么你可以添加一个if_eq帮助器并说：

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

Cleaning up your data would be a better idea. 清理数据将是一个更好的主意。

Handlebars.js条件声明

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-07-11 18:21:23

Handlebars.js条件声明

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-07-11 18:21:23

解决方案1
2 已采纳 2013-07-11 18:21:23