Question

我的骨干视图遇到了问题。我正在尝试渲染一个day对象数组，每天对象包含另一个时间对象数组。我从我的API中获得了这个集合，但是一旦渲染它就显示出来了：

enter image description here

从我的控制台可以看到，这基本上是我收藏的最后一项。 API调用实际上返回有效输出。

这就是我的模板：

<table id="stbl" class="table table-striped table-bordered">
     <% _.each(slots, function(slot) { %>
              <tr>
                <td>
                   <strong> <%- slot.startDate %> </strong>
                </td>
                <% _.each(slot.timeSlots, function(t) { %>
                    <td>
                       <button id="le-time" class="btn btn-primary"><%- t %></button>
                    </td>
                <% }); %>
               </tr>
         <% }); %>
</table>

这是我的收藏：

kronos.Slots = Backbone.Collection.extend({
    model: kronos.Slot,
    url: '/api/freeslots'
});

这就是我的观点：

kronos.TableView = Backbone.View.extend({
    initialize: function () {
        var self = this;
        this.collection.fetch({
            success: function (collection, response) {
                _.each(response, function (i) {
                    console.log(i);
                });
                self.render();
            },
            data: $.param({ orgID: 4 })
        });
        this.collection.on('reset', this.render, this);
    },
    template: _.template($('#slotsTable').html()),
    render: function () {
        $('#slotsContainer').html(this.template({
            slots: this.collection.toJSON()
        }));
    }
});

获取调用返回的JSON数据

[
    {"id":0, "startDate":"04/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]},
    {"id":0, "startDate":"05/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]}
]

你能帮我理解我在这里做错了吗？

谢谢

Answer 1

在集合中获取数据时，Backbone将使用数据执行collection.set：

设置 collection.set（models，[options]）
set方法使用传递的模型列表对集合执行“智能”更新。如果一个列表中的模型尚未添加到集合中;如果 model已经在集合中，它的属性将被合并;和如果集合包含列表中不存在的任何模型，他们将被删除。

你的所有型号都有相同的ID，0，这似乎无可救药地混淆Backbone：请参阅此演示http://jsfiddle.net/T3fmx/

要解决您的困境，您可以：

从服务器响应中删除id属性或指定唯一值http://jsfiddle.net/T3fmx/3/

在模型中设置假idAttribute：http://jsfiddle.net/T3fmx/1/

kronos.Slot = Backbone.Model.extend({
    idAttribute: 'whatever'
});

解析返回的数据以省略id属性：http://jsfiddle.net/T3fmx/2/

kronos.Slot = Backbone.Model.extend({
    parse: function(data) {
        return _.omit(data, 'id');
    }
});

Backbone JS Template仅打印集合中的最后一项

1 个答案: