Question

<!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。

Answer 1

如果没有参数，

{{#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>

Answer 2

在调用每个项目时，您需要传入要迭代的项目。在这种情况下，您将使用{{#each data}}

Answer 3

下面的一个工作正常，请参阅我对代码的更改。 {{#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

数据不附加到Handlebars.js中的元素

3 个答案: