如何从 json 文件创建 html 列表（车把）

Question

我有一个空的待办事项列表：

<ul class="list">

</ul>

我想在该列表中为每个 json 标题创建一个 li，我在以下 json 数据中：

[{"id":2,"title":"Mandar cartas a impresión","description":"","status":false,"priority":1,"created_at":"2015-12-07T13:09:55.552Z","updated_at":"2015-12-07T13:09:55.552Z","project_id":1},{"id":3,"title":"CIF Intracomunitario","description":"","status":false,"priority":1,"created_at":"2015-12-07T13:10:05.736Z","updated_at":"2015-12-07T13:10:05.736Z","project_id":1},{"id":4,"title":"Uniformes Chef a Porter","description":"","status":false,"priority":1,"created_at":"2015-12-07T13:10:16.170Z","updated_at":"2015-12-07T13:10:16.170Z","project_id":1},{"id":5,"title":"Personal","description":"","status":false,"priority":1,"created_at":"2015-12-07T13:10:31.569Z","updated_at":"2015-12-07T13:10:31.569Z","project_id":1},{"id":1,"title":"Mandar contrato pleni","description":"","status":false,"priority":1,"created_at":"2015-12-07T13:09:36.747Z","updated_at":"2015-12-07T13:13:12.068Z","project_id":1},{"id":17,"title":"Comprar TPV","description":"","status":false,"priority":null,"created_at":"2015-12-08T00:18:40.753Z","updated_at":"2015-12-08T00:18:40.753Z","project_id":1},{"id":18,"title":"Vajillas Zara Home","description":"","status":false,"priority":null,"created_at":"2015-12-08T00:18:54.580Z","updated_at":"2015-12-08T00:18:54.580Z","project_id":1},{"id":19,"title":"Tpv","description":"","status":false,"priority":null,"created_at":"2015-12-08T00:33:17.393Z","updated_at":"2015-12-08T00:33:17.393Z","project_id":1},{"id":21,"title":"Wifi - Contratar","description":"","status":false,"priority":null,"created_at":"2015-12-08T15:33:24.639Z","updated_at":"2015-12-08T15:33:24.639Z","project_id":1},{"id":22,"title":"Cuenta Definitiva Santander","description":"","status":false,"priority":null,"created_at":"2015-12-08T15:33:50.255Z","updated_at":"2015-12-08T15:33:50.255Z","project_id":1},{"id":23,"title":"Pagarés Kider","description":"","status":false,"priority":null,"created_at":"2015-12-08T15:34:08.162Z","updated_at":"2015-12-08T15:34:08.162Z","project_id":1}]

所以，我有以下 javascript，它使用把手进行模板化：

 <script>    
    jQuery.getJSON("http://myurl/tasks.json", function(data){  
    var source   = $("#tasks-template").html();
    var template = Handlebars.compile(source);
      $.each(data) function() {
         var context = data;
         var show    = template(context);
        $(".list").html(show);
      });
    });         
    </script>

我的把手模板：

  <script id="tasks-template" type="text/x-handlebars-template">
    <li>
        <div>{{title}}</div>
    </li>
  </script>

它不会在我的 html 中为 json 中的每个标题创建一个 li。

我错过了什么？

谢谢！

Answer 1

当您对 JSON 中收到的数组的每个 object 进行迭代时，您必须使用 this 而不是 data 访问 object。 data 是整个数组，this 是当前 object 要检索标题的位置属性:

$.each(data, function() {
     var context = this;
     var show    = template(context);
    $(".list").append(show);
  });

并更改 html 方法 append 不覆盖内容。

此致

如何从 json 文件创建 html 列表（车把）

How to create html list from a json file (handlebars)

javascript

json

handlebars.js