Fatal编程技术网

Javascript handlebar.js条件语句

javascript html templates

Javascript handlebar.js条件语句,javascript,html,templates,handlebars.js,Javascript,Html,Templates,Handlebars.js,我试图在我的Handlebar模板中执行一个条件语句。问题在于，如果插入if条件，则根本不会呈现内容 这是我的密码： <!DOCTYPE html> <html> <head> <title>Handlebars.js example</title> </head> <body> <div id="placeholder">This will get replaced by handl

我试图在我的Handlebar模板中执行一个条件语句。问题在于，如果插入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>


handlebar.js示例
这将被handlebar.js取代
{{{姓名}












{{itemTitle}}
{{itemsdescription}}

{{/names}
var source=document.getElementById（“myTemplate”）.innerHTML；
var template=handlebar.compile（源代码）；
//警报（模板）；
风险值数据={
姓名：[
{“itemImage”：“authorImage.png”，
“itemTitle”：“handlebar.js HTML模板”，
“itemType”：“icon_document.png”，
“isAudioAvailable”：“true”，
“isPresentationAvailable”：“true”，
“isTranscriptAvailable”：“true”，
“isVideoAvailable”：“false”，
“itemDescription”：“使用Javascript呈现HTML内容总是乱七八糟的！为什么？要呈现的HTML是不可读的。它太复杂了，无法管理。而且-最糟糕的是：它一次又一次地这样做！损失：性能、内存，每次添加标记时都必须重新绘制DOM。”}
]
};
document.getElementById（“占位符”）.innerHTML=模板（数据）；
条件：如果isVideoAvailable为真，则显示视频按钮

感谢您的帮助

谢谢，
Ankit

如果希望有条件地显示某些内容，则使用
{{{If}}
：

{{#if isVideoAvailable}}
    <img src="btn_downloadVideo.png"><br><br>
{{/if}}
清理数据会是一个更好的主意。

如果希望有条件地显示某些内容，请使用
{{If}}
：

{{#if isVideoAvailable}}
    <img src="btn_downloadVideo.png"><br><br>
{{/if}}
清理数据会是一个更好的主意。

似乎很好：@muistooshort是的，渲染很好。我只想在“isVideoAvailable”=“true”时渲染视频按钮。如果它是假的，我想把它藏起来。可以这样做吗？看起来很好：@muistooshort是的，渲染很好。我只想在“isVideoAvailable”=“true”时渲染视频按钮。如果它是假的，我想把它藏起来。可以这样做吗？我无法将if_eq助手用于字符串类型。它适用于布尔值，但不适用于字符串类型的数据：（@AnkitTanna:if_eq与字符串一起使用时发生了什么？您是如何使用它的？我无法将if_eq帮助器用于字符串类型。它在布尔值中工作，但不用于字符串类型的数据。：（@AnkitTanna:if_eq与字符串一起使用时发生了什么，您是如何使用它的？