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

4

3 回答 3

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>
于 2013-08-28T18:40:12.047 回答
0

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

于 2013-08-28T18:37:09.493 回答
0

下面的工作完美，请参阅我对代码的更改。{{#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}}，然后您根本不需要更改我所做的数据。usingthis是更具可读性的方式。

下面使用this. http://jsbin.com/ecazege/6

于 2013-08-28T19:08:54.303 回答