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"}]

我在警报（）中看到了这一点。

Answer 1

您应该从render处理程序调用{{1}}函数，因为success异步返回结果（您还可以bind collection.fetch函数收集{ {1}}事件）。

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;
    }
});

<强>更新

我已经创建了工作fiddle，但我不得不修改原始源代码，因为我无法使用您的persons端点

Answer 2

您所询问的是如何使用集合生成视图的一般性问题。他们中的大多数人都习惯于使用模型生成视图，但不能使用集合。我按照以下教程Binding a collection to a view进行了操作。也可能对你有帮助。

在backbone.js中呈现集合视图

2 个答案: