Javascript 如何使用木偶渲染收藏'；s项目视图？

我正试图用

主干.marionete.ItemView

呈现来自API（JSON）的响应。不知道为什么它不起作用

我正在使用木偶v2.4.7（故意）

以下是车把模板：

<script id="feed-post" type="text/x-handlebars-template">
  {{#each posts}}
    <a href="#"><img src="{{author.image_url}}" alt=""></a>
    <a href="#"><p>{{author.name}}</p></a>
    <span>TODO TIMESTAMP</span>
    <p>{{body}}</br>{{topic_type}}</p>
  {{/each}}
</script>

另外，我尝试了

console.log

视图，看起来模型就在那里

此答案是为木偶v2.4.7量身定制的<代码>布局视图和

项目视图

被合并并重新命名为

视图

---

从：

呈现此视图会将中的

someCollection

集合转换为 模板要使用的

项

数组

您正在模板中使用

帖子

，而文档称其将被称为

项目

作为参考，以下是在中执行此操作的确切代码：

最后几行显示，对于集合，将返回一个新对象，该对象的唯一属性为

items

上面提到，您可以覆盖

serializeData

函数

---

您仍然需要在视图上调用

render

，因为集合的

fetch

是异步的，所以您不会有现成的项，所以应该连接一个侦听器

首先，不要获取集合的

initialize

，这会使集合对于任何其他用例都毫无用处

var Posts = Backbone.Collection.extend({
  model: Post,
  url: 'http://localhost:4321/blogposts',
});

侦听collection

sync

事件，然后在视图中取回

var PostView = Marionette.ItemView.extend({
  el: '#content',
  template: Handlebars.compile($('#feed-post').html()),
  initialize: function () {
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
  },
});

木偶甚至提供：

---

你好我已将

posts

更改为

items

，但它仍然无法呈现。你还有别的想法吗？啊，你说得对！这是很明显的。谢谢你，埃米尔！除息的

var Posts = Backbone.Collection.extend({
  model: Post,
  url: 'http://localhost:4321/blogposts',
});

var PostView = Marionette.ItemView.extend({
  el: '#content',
  template: Handlebars.compile($('#feed-post').html()),
  initialize: function () {
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
  },
});

var PostView = Marionette.ItemView.extend({
  // ...snip...
  collectionEvents: {
    "sync": "render"
  }
  // ...snip...
});