0

Handlebars.registerHelper を使用して、handlebars.js で自分用のカスタム ヘルパーを作成しています。

次のヘルパーを登録しました。

Handlebars.registerHelper("determineItemType", function(type){
            console.log("--------> " + type);

                if(type == "document")
                {
                    return "document";
                } else if(type == "audio")
                {
                return "audio";
                }

            });

そして、Handlebars.js のテンプレートでは、次のように使用しています。

{{#determineItemType "document"}}
    <img src="icon_document.png"></img>
{{/determineItemType}}

しかし、問題は、ドキュメント アイコンが表示されないことです。アイコンの代わりに「ドキュメント」という単語が表示されています。

以下は、ページのコード全体です。

<!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;">
                    {{#if isAudioAvailable}}
                            {{#if isAudioDownloaded}}
                                <img src="btn_viewAudio.png"></img><br><br>
                            {{else}}        
                                <img src="btn_downloadAudio.png"></img><br><br>
                            {{/if}}
                        {{/if}}

                        {{#if isPresentationAvailable}}
                            {{#if isPresentationDownloaded}}
                                <img src="btn_viewPresentation.png"></img><br><br>
                            {{else}}
                                <img src="btn_downloadPresentation.png"></img><br><br>
                            {{/if}}
                        {{/if}}

                        {{#if isTranscriptAvailable}}
                            {{#if isTranscriptDownloaded}}
                                <img src="btn_viewTranscript.png"></img><br><br>
                            {{else}}
                            <img src="btn_downloadTranscript.png"></img><br><br>
                            {{/if}}
                        {{/if}}

                      {{#if isVideoAvailable}}
                            {{#if isVideoDownloaded}}
                                <img src="btn_viewVideo.png"></img><br><br>
                            {{else}}
                            <img src="btn_downloadVideo.png"></img><br><br>
                            {{/if}}
                      {{/if}}
               </td>
           </tr>
           <tr>
                <td colspan="2">
                    {{#determineItemType "document"}}
                        <img src="icon_document.png"></img>
                    {{/determineItemType}}

                    &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": "document",
                "isAudioAvailable": true,
                "isAudioDownloaded": false,
                "isPresentationAvailable": true,
                "isPresentationDownloaded": false,
                "isTranscriptAvailable": true,
                "isTranscriptDownloaded": true,
                "isVideoAvailable": false,
                "isVideoDownloaded": 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."}
            ]
        };

        Handlebars.registerHelper("determineItemType", function(type){
            console.log("--------> " + type);

                if(type == "document")
                {
                    return "document";
                } else if(type == "audio")
                {
                return "audio";
                }

            });


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

    </script>


</body>
</html>

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

ありがとう、アンキット。

4

1 に答える 1

3

ブロック ヘルパーによって返された文字列は、レンダリングされたテンプレートに挿入するコンテンツとして使用されます。documentを返すので、それが HTML で得られます。

http://handlebarsjs.com/block_helpers.htmlから

[ブロック ヘルパー] はオプション ハッシュを受け取ります。このオプション ハッシュにはoptions.fn、通常のコンパイル済みハンドルバー テンプレートのように動作する関数 ( ) が含まれています。具体的には、この関数はコンテキストを受け取り、文字列を返します。

に対してテストしたいと仮定するとitemType、ヘルパーは次のように記述できます。

Handlebars.registerHelper("determineItemType", function(type, options){
    return (this.itemType === type) ? options.fn(this) : "";
});

そしてhttp://jsfiddle.net/NqCFB/で遊ぶフィドル

于 2013-07-14T06:55:32.853 に答える