Question

我正在使用句柄来遍历从get请求获取的对象数组：

<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
    {{#each this}}
        <a href="blogpost.html">{{name}}</a>
    {{/each}}
</script>
<script>
  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data = $.get('http://localhost:3000/teams.json');
  console.log(data.responseJSON);
  $("#content-placeholder").html(template(data));
</script>

JSON的格式为：

[
    0: {name: 'name1'},
    1: {name: 'name2'},
    ...
]

get请求返回正确的数据，但由于某种原因，该名称未显示在html中。相反，请求的不同部分是。这是html的样子：

<a href="blogpost.html">GETRESPONSEHEADER</a>
<a href="blogpost.html">GETALLRESPONSEHEADERS</a>
<a href="blogpost.html">SETREQUESTHEADER</a>
...

控制台中没有错误。我该如何解决这个问题？

Answer 1

如https://api.jquery.com/jquery.get/所述，$.get()函数返回XMLHTTPRequest对象的超集。所以，你实际打印的是这个对象的方法的名称。 $.get()函数返回的对象使用done()方法实现 Promise ，因此我们可以异步执行我们的代码，如下所示：

<script>
  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data = $.get('teams.json');
  data.done(function (data) {
    console.log(data.responseJSON);
    $("#content-placeholder").html(template(data));
  });
</script>

我们也可以将其作为回调函数：

<script>
  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data = $.get('teams.json', function (data) {
    console.log(data.responseJSON);
    $("#content-placeholder").html(template(data));
  });
</script>

请注意，callback或promise done()函数中的 data 变量是其匿名函数的局部变量，与{{返回的 data 不同1}}功能。

plunker：http://plnkr.co/edit/zveLAFNWvaDTmLFdLkLW

把手循环没有显示正确的数据

1 个答案: