Handlebars.js 조건문

내 Handlebars 템플릿에서 조건문을 실행하려고합니다. 문제는 if 조건이 삽입되면 콘텐츠를 전혀 렌더링하지 않는다는 것입니다. isVideoAvailable이 어떤 도움에 감사드립니다Handlebars.js 조건문

에 해당하는 경우 디스플레이 비디오 버튼 :

<!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}}">&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 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 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."} 
      ] 
     }; 

     document.getElementById("placeholder").innerHTML = template(data); 

    </script> 

</body> 
</html>

조건 :

여기 내 코드입니다. 당신이 뭔가 조건부로 표시 할 경우

감사합니다, ANKIT는

출처

2013-07-11 Ankit Tanna

잘 작동하는 것 같습니다. http://jsfiddle.net/ambiguous/DAHKY/ –

@muistooshort 네, 렌더링은 문제가 없습니다. "isVideoAvailable"== "true"인 경우에만 비디오 단추를 렌더링하고 싶습니다. 거짓이라면 나는 그것을 숨기고 싶다. 이 작업을 수행 할 수 있습니까? –

, 당신은 사용 {{#if}} :

즉, 데이터가 의미가 있어야 제대로 작동하고 isVideoAvailable이어야에 대한 물론

{{#if isVideoAvailable}} 
    <img src="btn_downloadVideo.png"><br><br> 
{{/if}}

부울 값 따라서 데이터를 정리하여 isVideoAvailable이 'true' 또는 'false' 문자열이 아닌 true 또는 false이어야합니다. 데이터를 전처리하는 것은 Handlebars에서 매우 일반적이므로 데이터를 수정하는 것이 가장 좋은 방법이며, 데이터를 수정하면 JavaScript에서 자연스럽게 사용할 수 있습니다.

데모 : 당신은 문자열로 부울 값을 떠날 주장 경우 http://jsfiddle.net/ambiguous/LjFr4/

그러나, 당신은 if_eq 도우미를 추가하고 말할 수 :

{{#if_eq isVideoAvailable "true"}} 
    <img src="btn_downloadVideo.png"><br><br> 
{{/if_eq}}

을 더 좋은 생각이 될 것입니다 데이터를 정리.

출처

2013-07-11 18:21:23

정말 잘 돌아갔습니다. :) 고마워. –

문자열 유형으로 if_eq 도우미를 사용할 수 없습니다. 그것은 boolean에서 작동하지만 문자열 유형의 데이터에서는 작동하지 않습니다. :( –

@AnkitTanna : 문자열에'if_eq'를 사용하고 어떻게 사용 했습니까? –

Handlebars.js 조건문

답변

관련 문제