数据不附加到元素在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

回答

相关问题