數據不附加到元素在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

回答

相關問題