I am trying to execute a conditional statement in my Handlebars template. The issue is it is not rendering the content at all if an if condition is inserted.
Here is my code:
<!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 = Handlebarspile(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 plex 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>
CONDITION: Display Video Button if the isVideoAvailable is true
Any help is appreciated.
Thanks, Ankit
I am trying to execute a conditional statement in my Handlebars template. The issue is it is not rendering the content at all if an if condition is inserted.
Here is my code:
<!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.pile(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 plex 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>
CONDITION: Display Video Button if the isVideoAvailable is true
Any help is appreciated.
Thanks, Ankit
Share Improve this question asked Jul 11, 2013 at 17:05 Ankit TannaAnkit Tanna 1,8218 gold badges34 silver badges63 bronze badges 2- Seems to work fine: jsfiddle/ambiguous/DAHKY – mu is too short Commented Jul 11, 2013 at 17:27
- @muistooshort Yes, rendering is fine. I want to render the video button only if "isVideoAvailable" == "true". if its false, I want to hide it. Can this be done? – Ankit Tanna Commented Jul 11, 2013 at 17:51
1 Answer
Reset to default 5If you want something to be displayed conditionally, you use an {{#if}}:
{{#if isVideoAvailable}}
<img src="btn_downloadVideo.png"><br><br>
{{/if}}
Of course for that to work properly, your data should make sense and isVideoAvailable should be a boolean value. So you'll also need to clean up your data to make sense and isVideoAvailable should be true or false rather than the strings 'true' or 'false'; preprocessing your data is quite mon with Handlebars so fixing your data would be the best thing to do, fixing your data would also let you use it in a natural manner in JavaScript.
Demo: http://jsfiddle/ambiguous/LjFr4/
But, if you insist on leaving your boolean values as strings then you could add an if_eq helper and say:
{{#if_eq isVideoAvailable "true"}}
<img src="btn_downloadVideo.png"><br><br>
{{/if_eq}}
Cleaning up your data would be a better idea.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745416403a4626768.html
评论列表（0条）