Handlebars.js自定义条件帮助程序
Handlebars.js Custom Conditional helper
我正在使用handlebars.registerHelper.在handlers.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}}
<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>
感谢您的帮助。
谢谢,安基特。
块助手返回的字符串用作注入到渲染模板中的内容。您返回文档,所以这就是您在HTML中得到的内容。
发件人http://handlebarsjs.com/block_helpers.html
[块助手]将接收一个选项哈希。此选项哈希包含一个函数(
options.fn
),其行为类似于正常编译的Handlebars模板。具体来说,函数将采用上下文并返回一个字符串。
假设你想针对itemType
进行测试,你的助手可以写成
Handlebars.registerHelper("determineItemType", function(type, options){
return (this.itemType === type) ? options.fn(this) : "";
});
和一个Fiddle一起玩http://jsfiddle.net/NqCFB/
相关文章:
- {{#each}}内部的Handlebar帮助程序
- Handlebars帮助程序未获取变量的值
- Node Express Handlebars帮助程序未返回函数的结果
- 如何让应用程序帮助程序方法在发送的请求为 JS 格式时工作
- 从帮助程序异步返回值
- 无法使用模板帮助程序设置正文类
- 在呈现模板之前调用帮助程序
- 花式框 V2 按钮帮助程序冲突
- 在帮助程序处获取对象值的车把,无需使用数据进行编译
- {{outlet}}、{{yield}、}{render}和{{partial}的ember帮助程序之间存在差异
- 模板帮助程序在session.set之后未更新
- 引导程序窗体帮助程序-状态选择器-选择类
- 如何在HTMLBars中编写帮助程序
- 使用自定义断言帮助程序对cli扩展assert进行ember-cli扩展
- 引导窗体帮助程序选择框
- 在模板帮助程序中连接两个查询的结果
- 将字符串中的URL替换为包含匹配URL的HTML字符串的Handlebar帮助程序
- 车把,如何为帮助程序返回的值设置条件
- 使用帮助程序的流星条件 HTML
- Handlebars.js自定义条件帮助程序