javascript - 主干 JS 模板仅打印集合中的最后一项

Question

我的主干 View 有问题。我正在尝试渲染一组日期对象，并且每个日期对象都包含另一个时间对象数组。我从我的 API 中获得了很好的集合，但是一旦它被渲染，它就会显示:

从我的控制台上可以看到，这基本上是我收藏的最后一项。 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()
        }));
    }
});

fetch 调用返回的 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与数据:

set collection.set(models, [options])
The set method performs a "smart" update of the collection with the passed list of models. If a model in the list isn't yet in the collection it will be added; if the model is already in the collection its attributes will be merged; and if the collection contains any models that aren't present in the list, they'll be removed.

你所有的模型都有相同的 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');
      }
  });