Handlebars.js条件语句
Handlebars.js Conditional Statement
我正试图在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}}">
<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为真,则显示视频按钮
感谢您的帮助。
谢谢,Ankit
如果您想有条件地显示某些内容,可以使用{{#if}}
:
{{#if isVideoAvailable}}
<img src="btn_downloadVideo.png"><br><br>
{{/if}}
当然,为了使其正常工作,您的数据应该是有意义的,并且isVideoAvailable
应该是布尔值。因此,您还需要清理数据以使其有意义,并且isVideoAvailable
应该是true
或false
,而不是字符串'true'
或'false'
;预处理数据在Handlebars中很常见,因此修复数据是最好的做法,修复数据也可以让你在JavaScript中以自然的方式使用它。
演示:http://jsfiddle.net/ambiguous/LjFr4/
但是,如果您坚持将布尔值保留为字符串,那么您可以添加一个if_eq
助手,并说:
{{#if_eq isVideoAvailable "true"}}
<img src="btn_downloadVideo.png"><br><br>
{{/if_eq}}
清理你的数据会是一个更好的主意。
相关文章:
- 这个条件语句的逻辑有问题
- 如何检查if/else语句中的随机条件
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- 照片滑块的条件语句
- 使用解析为javascript源的.php,如何使用条件语句将javascript代码封装在php括号之间
- KnockoutJS:为虚拟元素使用嵌套的条件if语句
- 在if语句注释的条件内指定变量的值
- Javascript/C# - 满足语句条件时的确认对话框
- 如何将窗口[VariableName]设置为if语句条件
- if 语句条件由 javascript 中 if 语句内的内容触发
- if 语句条件逻辑
- 函数声明,就像语句条件一样
- 如何减少“如果语句”条件?[减少 if 语句中的条件]
- if语句条件检查!= "undefined"失败
- If语句条件满足,但内容未执行
- AngularJS在ng-repeat语句中的if语句条件
- 变量中用作if语句条件的字符串
- Javascript如果语句条件不满足
- if 语句 - 条件评估时间(Javascript)
- 数组中指定的 if 语句条件