Javascript backbone.js“；订单“；类似TodoMVC的属性不递增

我很难在BackboneJS中获得具有自动递增“order”属性的模型

出于某种原因，每个订单都设置为

1

。

nextOrder

函数中的集合长度始终为

0

Options = _.extend(Options, {
    Models: {
        Profile: Backbone.Model.extend({
            defaults: function() {
                console.log("Defaults");
                return {
                    title: "New Profile",
                    order: Profiles.nextOrder(),
                    active: false
                };
            },
            url: "/youdontcare"
        })
});

Options = _.extend(Options, {
    Collections: {
        ProfileList: Backbone.Collection.extend({
            model: Options.Models.Profile,
            comparator: function(profile) {
                console.log("Comparator");
                return profile.get('order');
            },
            nextOrder: function() {
                console.log("nextOrder...");
                console.log(this.length);
                if (!this.length) return 1;
                return this.last().get('order') + 1;
            },
            url: "/youdontcare"
        })
});

Options = _.extend(Options, {
    Views: {
        ProfileView: Backbone.View.extend({
            tagName: "li",
            template: _.template($('#profile-template').html()),
            render: function() {
                console.log("Render Profile");
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        }),
        ProfileListView: Backbone.View.extend({
            el: $("#auth_env_list"),
            initialize: function() {
                Profiles = new Options.Collections.ProfileList;
                console.log("INIT LIST");

                this.listenTo(Profiles, 'add', this.addOne);
                this.listenTo(Profiles, 'reset', this.addAll);
                this.listenTo(Profiles, 'all', this.render);

                // Suppresses 'add' events with {reset: true} and prevents the app view 
                // from being re-rendered for every model. Only renders when the 'reset'
                // event is triggered at the end of the fetch.
                console.log("Fetching");
                Profiles.fetch({ reset: true });
                console.log("Done fetching");
            },
            addOne: function (profile) {
                console.log("addOne");
                var view = new Options.Views.ProfileView({ model: profile });
                this.$el.append(view.render().el);
            },
            addAll: function () {
                console.log("addAll");
                this.$el.html('');
                Profiles.each(this.addOne, this);
            },
            render: function() {
                console.log("RENDER PROFILE LIST VIEW");

                if (Profiles.length)
                {

                }
            }
        })
});

我可以看到

Options.Collections.ProfileList

集合的

Profiles

实例中的

nextOrder

函数被调用为为集合获取的每个元素的适当次数。。。但是，它尝试使用

this.length计算的集合长度始终返回
0

具有5个“配置文件”元素的控制台输出：

INIT LIST
Fetching 
RENDER PROFILE LIST VIEW
Done fetching
Defaults
nextOrder... 
0
Defaults
nextOrder...
0
Defaults
nextOrder...
0
Defaults 
nextOrder...
0
Defaults
nextOrder...
0
Comparator 
addAll
addOne
Render Profile
addOne
Render Profile
addOne
Render Profile
addOne
Render Profile
addOne
Render Profile
RENDER PROFILE LIST VIEW
RENDER PROFILE LIST VIEW

有没有更好的方法可以为它们分配一个自动递增的客户端ID？我想这样做的唯一原因是将它们显示在一个编号的列表中。
通过模型调用集合，可以创建一个循环引用，如果要在不同的集合上重用代码，则效率不高。可能是因为0没有引用实际的集合实例，所以返回了0。要实现您的目标，更好的方法是让集合在向集合添加新模型时分配订单号：

// 1st, get rid of the adding an order in your model
// in your collection, add something like the following
initialize: function() {
  this.on('add', this.addOrderID);
  this.on('reset', this.addOrderIDs);
},
addOrderID: function(model) {
  var order = this.length;
  model.set({'order': order});
},
addOrderIDs: function() {
  var order = this.length;
  this.models.forEach( function(model) {
    model.set({'order': order});
    order++;
  }, this);
}

我认为这应该可以满足您的要求。
这不太管用——集合中从未调用addOrderID函数。最后，我向Profiles集合添加了一个'order'整型属性，然后将nextOrder函数更改为“returnthis.order++”。我认为，代码不起作用的原因是调用初始获取没有触发'add'事件。如果为“重置”添加事件，则它应处理集合的初始填充。然而，我并不是100%肯定这一切。