데이터가 Handlebars.js의 요소에 추가되지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script> 
<script src="app.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <ul> 
    <script id ="ajaxTemplate" type="text/x-handlebars-template"> 
    {{#each}} 
    <li> 
     <span class="meta">{{name}} on {{date}}</span> 
     <p>{{comment}}</p> 
    </li> 
    {{/each}} 
    </script> 

    </ul> 
    <script> 
    $(document).ready(function(){ 
     //document.write("Hello"); 
     var data = [{ 
      "name":"Name2", 
      "date":"12/12/1999" 
     }, { 
      "name":"Name1", 
      "date":"12/12/1999"   
     }] 
     var source = $.trim($('#ajaxTemplate').html()); 
     var template = Handlebars.compile(source); 
     var html = template(data); 
     //document.write(html); 
     $('ul').append(html); 
    }); 
    </script> 
</body> 
</html>

위의 코드에서 실수가 무엇인지 말해 줄 수 있습니까? 컴파일 된 JS 코드를 DOM에 추가 할 수 없습니다.데이터가 Handlebars.js의 요소에 추가되지 않습니다.

출처

2013-08-28 theJava

등의 객체에 배열을 포장 할 수 있습니다. {{#each data}}은 data.data을 참조하며 루프를 수행하려면 array이 될 것으로 예상합니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <ul> 
    <script id ="ajaxTemplate" type="text/x-handlebars-template"> 
    {{#each data}} 
    <li> 
     <span class="meta">{{this.name}} on {{this.date}}</span> 
    </li> 
    {{/each}} 
    </script> 

    </ul> 
    <script> 
    $(document).ready(function(){ 
     //document.write("Hello"); 
     var data = {data:[{ 
      "name":"Vinoth", 
      "date":"12/12/1984" 
      }, { 
      "name":"Kevin", 
      "date":"7/23/1984"   
     }]}; 
     var source = $.trim($('#ajaxTemplate').html()); 
     var template = Handlebars.compile(source); 
     var html = template(data); 
     //document.write(html); 
     $('ul').append(html); 
    }); 
    </script> 
</body> 
</html>

예를 사용 : http://jsbin.com/ecazege/1

은 또한 당신이 {{#each this}}을 사용할 수 있습니다 그리고 당신은 전혀 내가 무슨 짓을했는지의 데이터를 변경할 필요가 없습니다. this을 사용하면 더 읽기 쉽습니다.

이하 바이얼 사용 this. http://jsbin.com/ecazege/6

출처

2013-08-28 19:08:54 Thalaivar

각각을 호출 할 때 반복 할 항목을 전달해야합니다. 이 경우 사용하실 수 있습니다 {{#each data}}

출처

2013-08-28 18:37:09

{{#each}} 매개 변수없이 사용할 수 없습니다.

당신은 팁 {{#each .}}를 사용하거나 하나의 코드 내 변화를 볼, 완벽하게 작동 아래 단순히이

<script id ="ajaxTemplate" type="text/x-handlebars-template"> 
    {{#each items}} 
    <li> 
     <span class="meta">{{name}} on {{date}}</span> 
     <p>{{comment}}</p> 
    </li> 
    {{/each}} 
    </script> 

    </ul> 
    <script> 
    $(document).ready(function(){ 
     //document.write("Hello"); 
     var data = [{ 
      "name":"Name2", 
      "date":"12/12/1999" 
     }, { 
      "name":"Name1", 
      "date":"12/12/1999"   
     }] 
     var source = $.trim($('#ajaxTemplate').html()); 
     var template = Handlebars.compile(source); 
     var html = template({items}); 
     //document.write(html); 
     $('ul').append(html); 
    }); 
    </script>

출처

2013-08-28 18:40:12 Cybermaxs

데이터가 Handlebars.js의 요소에 추가되지 않습니다.

답변

관련 문제