title: Handlebars.js Custom Conditional helper
body: <p>I am making a custom helper for myself in the handlebars.js with Handlebars.registerHelper. </p>
  
  <p>I have registered following helper:</p>
  
  <pre><code>Handlebars.registerHelper("determineItemType", function(type){
              console.log("--------&gt; " + type);
  
                  if(type == "document")
                  {
                      return "document";
                  } else if(type == "audio")
                  {
                  return "audio";
                  }
  
              });
  </code></pre>
  
  <p>and in the template of Handlebars.js I am using it as follows:</p>
  
  <pre><code>{{#determineItemType "document"}}
      &lt;img src="icon_document.png"&gt;&lt;/img&gt;
  {{/determineItemType}}
  </code></pre>
  
  <p>But the issue is, its not showing the document icon. It is showing the word "document" in place of icon.</p>
  
  <p>Below is the entire code for the page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Handlebars.js example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="placeholder"&gt;This will get replaced by handlebars.js&lt;/div&gt;
      &lt;script type="text/javascript" src="handlebars.js"&gt;&lt;/script&gt;
      &lt;script id="myTemplate" type="text/x-handlebars-template"&gt;
  
  
  
          {{#names}}
          &lt;div style="width:100%;border:2px solid red;"&gt;
          &lt;table style="width:100%;border:2px solid black"&gt;
              &lt;tr&gt;
                   &lt;td style="width:50%; border:2px solid yellow;"&gt;
                          &lt;img src="{{itemImage}}"&gt;&lt;/img&gt;
                  &lt;/td&gt;
                 &lt;td style="width:50%; border:2px solid green;"&gt;
                      {{#if isAudioAvailable}}
                              {{#if isAudioDownloaded}}
                                  &lt;img src="btn_viewAudio.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{else}}        
                                  &lt;img src="btn_downloadAudio.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{/if}}
                          {{/if}}
  
                          {{#if isPresentationAvailable}}
                              {{#if isPresentationDownloaded}}
                                  &lt;img src="btn_viewPresentation.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{else}}
                                  &lt;img src="btn_downloadPresentation.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{/if}}
                          {{/if}}
  
                          {{#if isTranscriptAvailable}}
                              {{#if isTranscriptDownloaded}}
                                  &lt;img src="btn_viewTranscript.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{else}}
                              &lt;img src="btn_downloadTranscript.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{/if}}
                          {{/if}}
  
                        {{#if isVideoAvailable}}
                              {{#if isVideoDownloaded}}
                                  &lt;img src="btn_viewVideo.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{else}}
                              &lt;img src="btn_downloadVideo.png"&gt;&lt;/img&gt;&lt;br&gt;&lt;br&gt;
                              {{/if}}
                        {{/if}}
                 &lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      {{#determineItemType "document"}}
                          &lt;img src="icon_document.png"&gt;&lt;/img&gt;
                      {{/determineItemType}}
  
                      &amp;nbsp;
                  &lt;label style="font-weight:bolder"&gt;{{itemTitle}}&lt;/label&gt;
                 &lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
              &lt;td colspan="2"&gt;
                      &lt;p&gt;{{itemDescription}}&lt;/p&gt;
                  &lt;/td&gt;
             &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/div&gt;  
          {{/names}}
  
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          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("--------&gt; " + type);
  
                  if(type == "document")
                  {
                      return "document";
                  } else if(type == "audio")
                  {
                  return "audio";
                  }
  
              });
  
  
          document.getElementById("placeholder").innerHTML = template(data);
  
      &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help is appreciated.</p>
  
  <p>Thanks,
  Ankit.</p>