骨干JS模板打印只集合中最后一个项目 [英] Backbone JS Template Printing only last item in the collection

问题描述

我面临的一个问题，我的看法骨干。我试图渲染一天对象的数组，每天对象包含时间对象的另一个数组。我得到的收集从我的API只是罚款，但一旦其呈现它显示了这一点：

I am facing a problem with my backbone view. I am trying to render an array of day objects and each day object contains another array of time objects. I get the collection from my API just fine, but once its rendered it shows this:

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

Which is basically the last item of my collection as I can see from my console. The API call actually returns valid output.

这是我的模板是这样的：

This is what my template looks like:

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

这是我的看法是什么样子：

And this is what my view looks like:

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数据的fetch调用

JSON data returned by the fetch call

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

能否请您帮助我理解我在做什么错在这里？

Can you please help me understand what am I doing wrong here?

感谢

推荐答案

在集合中获取数据，骨干将执行的 collection.set 的数据：

When fetching data in a collection, Backbone will perform a collection.set with the data:

设置 collection.set（机型，[选项]）结果
  set方法执行与模型的传递的列表集合的智能的更新。如果一个
  列表中的模式是尚未它将被添加在集合中;如果
  模式已经收集其属性将被合并的;和
  如果集合包含未present列表中的任何机型，
  他们将被删除。

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，这似乎无可救药地迷惑骨干：看到这个演示的http：//的jsfiddle .NET / T3fmx /

All your models have the same id, 0, which seems to hopelessly confuse Backbone : see this demo http://jsfiddle.net/T3fmx/

要解决你的困惑，您可以：

To solve your quandary, you can either:

• 删除 ID 来自服务器的响应属性或指定唯一值的 http://jsfiddle.net/T3fmx/3/

• remove the id attribute from the server response or assign unique values, http://jsfiddle.net/T3fmx/3/

设置一个假的 idAttribute 在你的模型：的 http://jsfiddle.net/T3fmx/1/

set a fake idAttribute in your model : 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');
    }
});

这篇关于骨干JS模板打印只集合中最后一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！