javascript - Handlebars.js Conditional Statement -


i trying execute conditional statement in handlebars template. issue is not rendering content @ if if condition inserted.

here code:

<!doctype html> <html> <head>     <title>handlebars.js example</title> </head> <body>     <div id="placeholder">this replaced 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 html",                 "itemtype": "icon_document.png",                 "isaudioavailable": "true",                 "ispresentationavailable": "true",                 "istranscriptavailable": "true",                 "isvideoavailable": "false",                 "itemdescription": "rendeting html content using javascript messy! why? html rendered unreadable. complex manage. , - worst part: again , again , again! loss: performance, memory, dom has re-drawn again each , every time tag added."}             ]         };          document.getelementbyid("placeholder").innerhtml = template(data);      </script>  </body> </html>

condition: display video button if isvideoavailable true

any appreciated.

thanks, ankit

if want displayed conditionally, use {{#if}}:

{{#if isvideoavailable}}     <img src="btn_downloadvideo.png"><br><br> {{/if}}

of course work properly, data should make sense , isvideoavailable should boolean value. you'll need clean data make sense , isvideoavailable should true or false rather strings 'true' or 'false'; preprocessing data quite common handlebars fixing data best thing do, fixing data let use in natural manner in javascript.

demo: http://jsfiddle.net/ambiguous/ljfr4/

but, if insist on leaving boolean values strings add if_eq helper , say:

{{#if_eq isvideoavailable "true"}}     <img src="btn_downloadvideo.png"><br><br> {{/if_eq}}

cleaning data better idea.


Comments

Post a Comment