0

Handlebars テンプレートで条件ステートメントを実行しようとしています。問題は、if 条件が挿入されている場合、コンテンツがまったくレンダリングされないことです。

これが私のコードです：

<!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 が true の場合、ビデオ ボタンを表示する

どんな助けでも大歓迎です。

ありがとう、アンキット

4

1 に答える 1

4

何かを条件付きで表示したい場合は、次を使用します{{#if}}。

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

もちろん、それが適切に機能するためには、データが意味を成しisVideoAvailable、ブール値である必要があります。したがって、意味をなすためにデータをクリーンアップする必要もあり、文字列orではなくorにするisVideoAvailable必要があります。データを前処理することはハンドルバーでは非常に一般的であるため、データを修正するのが最善の方法です。データを修正すると、JavaScript で自然な方法でデータを使用することもできます。truefalse'true''false'

デモ: http://jsfiddle.net/ambiguous/LjFr4/

ただし、ブール値を文字列のままにしておくことを主張する場合は、if_eqヘルパーを追加して次のように言うことができます。

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

データをクリーンアップすることをお勧めします。

于 2013-07-11T18:21:23.163 に答える