Fatal编程技术网
  • javascript/
  • Javascript handlebar.js自定义条件帮助器

Javascript handlebar.js自定义条件帮助器

javascript html templates

Javascript handlebar.js自定义条件帮助器,javascript,html,templates,handlebars.js,Javascript,Html,Templates,Handlebars.js,我正在使用handlebar.registerHelper在handlebar.js中为自己制作一个自定义助手 我已注册以下助手： Handlebars.registerHelper("determineItemType", function(type){ console.log("--------> " + type); if(type == "document") {

我正在使用handlebar.registerHelper在handlebar.js中为自己制作一个自定义助手

我已注册以下助手：

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

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

            });
在handlebar.js的模板中，我使用它如下：

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

{{{#determinetitemtype“document”}
{{/determinetitemtype}
但问题是，它没有显示文档图标。它显示的是“文档”一词，而不是图标

以下是该页面的完整代码：

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


handlebar.js示例
这将被handlebar.js取代
{{{姓名}
{{#如果是音频可用的}
{{#如果是音频下载}



{{else}



{{/if}
{{/if}
{{#如果isPresentationAvailable}
{{#如果是已下载的演示文稿}



{{else}



{{/if}
{{/if}
{{#如果isTranscriptAvailable}
{{#如果isTranscriptDownloaded}



{{else}



{{/if}
{{/if}
{{#如果可用}
{{{#如果是视频下载}



{{else}



{{/if}
{{/if}
{{{#determinetitemtype“document”}
{{/determinetitemtype}
{{itemTitle}}
{{itemsdescription}}

{{/names}
var source=document.getElementById（“myTemplate”）.innerHTML；
var template=handlebar.compile（源代码）；
//警报（模板）；
风险值数据={
姓名：[
{“itemImage”：“authorImage.png”，
“itemTitle”：“handlebar.js HTML模板”，
“项目类型”：“文档”，
“isAudioAvailable”：正确，
“IsAudioDownload”：false，
“isPresentationAvailable”：真，
“isPresentationDownloaded”：false，
“isTranscriptAvailable”：true，
“isTranscriptDownloaded”：true，
“isVideoAvailable”：false，
“isVideoDownloaded”：false，
“itemDescription”：“使用Javascript呈现HTML内容总是乱七八糟的！为什么？要呈现的HTML是不可读的。它太复杂了，无法管理。而且-最糟糕的是：它一次又一次地这样做！损失：性能、内存，每次添加标记时都必须重新绘制DOM。”}
]
};
把手.注册表帮助器（“确定项类型”），功能（类型）{
console.log（“---------->”+类型）；
如果（类型=“文档”）
{
返回“文件”；
}else if（类型=“音频”）
{
返回“音频”；
}
});
document.getElementById（“占位符”）.innerHTML=模板（数据）；
感谢您的帮助

谢谢，
Ankit。

块辅助对象返回的字符串用作要注入渲染模板的内容。返回文档，这就是HTML中的内容

从

[块帮助器]将接收选项哈希。这个选项是散列的 包含一个函数（
options.fn
），该函数的行为类似于普通编译函数 把手模板。具体来说，函数将采用上下文 并返回一个字符串

假设您想针对
itemType
进行测试，那么您的助手可以编写为

Handlebars.registerHelper("determineItemType", function(type, options){
    return (this.itemType === type) ? options.fn(this) : "";
});
并且，一个用于播放的小提琴块帮助器返回的字符串被用作注入渲染模板的内容。返回文档，这就是HTML中的内容

从

[块帮助器]将接收选项哈希。这个选项是散列的 包含一个函数（
options.fn
），该函数的行为类似于普通编译函数 把手模板。具体来说，函数将采用上下文 并返回一个字符串

假设您想针对
itemType
进行测试，那么您的助手可以编写为

Handlebars.registerHelper("determineItemType", function(type, options){
    return (this.itemType === type) ? options.fn(this) : "";
});
还有一把小提琴

你想要的文档对象名是什么？助手的外观应该类似于{{determinetitemtype Document}}您期望的文档对象名称是什么？助手的外观应该类似于{{determinetitemtype Document}}