我正在使用 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}}
<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>
任何帮助表示赞赏。
谢谢,安基特。