在backbone.js中呈现集合视图

Question

我在理解如何在模板中呈现一个集合时遇到了问题。以下是我的代码：

<div id="mydiv"></div>

<script type="text/template" id="details">
<ul>
<% _.each(?, function(person)  { %>
<li><%= person.name %></li>
<% }); %>
</ul>
</script>

<script>
var m = Backbone.Model.extend();

var c = Backbone.Collection.extend({
        url: 'retrieve.php',
        model: m
 });

var v = Backbone.View.extend({
        el : $('#mydiv'),
        template : _.template($("#details").html()),
        initialize : function() {
        var coll = new c(); 
        coll.fetch({success: function(){alert(JSON.stringify(coll));} });              
        this.render();
        },
        render : function() {
        //what do I put here?
        return this;
       }
});

var view = new v();

我对如何将从我的php文件返回的数据传递到模板中感到困惑。在视图和._each中需要什么代码？我的php代码返回：

 [{"id":"1","name":"John","age":"5"},{"id":"2","name":"Jane","age":"2"}]

我在alert()中看到了这个。

- user1884367

Answer 1

当你调用collection.fetch方法时，它的返回结果是异步的，因此你应该在success回调函数中调用你的render函数（你也可以将render函数绑定到集合的reset事件上，详情请参考这里）。

var v = Backbone.View.extend({
    el : '#mydiv',
    template : _.template($("#details").html()),
    initialize : function() {
      var self = this, 
          coll = new c(); 
      coll.fetch({ success: function(){ self.render() ; } });              
    },
    render : function() {
      // the persons will be "visible" in your template
      this.$el.html(this.template({ persons: this.coll.toJSON() }));
      return this;
    }
});

在模板中引用同一个persons对象

<script type="text/template" id="details">
  <ul> 
    <% _.each(persons, function(person)  { %>
      <li><%= person.name %></li>
    <% }); %>
  </ul>
</script>

更新：

我已经创建了一个可用的fiddle，但是我不得不修改原始源代码，因为我不能使用你的retrieve.php端点。

- user20140268

---

嗯！我理解逻辑，但是不知道为什么它不能正常工作。当我运行代码时，什么也看不到。你有什么想法吗？ - user1884367

这是一种不好的方法，因为如果你的任何模型发生变化，你需要重新渲染整个集合以反映视图中的变化。 - Jaseem

@Jaseem 你好。如果你认为这是一个不好的方法，那么你能否分享一些你认为更好的方法？顺便说一句，我还是backbone.js的新手。 - Neeraj Kumar

Answer 2

你所问的是如何使用集合生成视图的通用问题。大多数人都习惯于使用模型生成视图，而不是使用集合。我遵循了以下教程将集合绑定到视图。这可能对你也有帮助。

- Venkat Kotra