数据未追加到车把中的元素.js

Data not appending to element in Handlebars.js

本文关键字：元素 js 追加 数据      更新时间：2023-09-26
<!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。

{{#each}}不能

在没有参数的情况下使用。

您可以使用 tip {{#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>

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

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

相关文章：