Backbone.js 集合在创建时添加了空元素？

Question

我假设这要么是我的代码中的错误，要么是主干.js 的未记录（据我所知）功能。当我创建我的集合和我的视图时，该集合中已经有一个我没有创建的模型，或者我假设我没有创建由于未定义的 id。下面是我的代码。

// ---------------------------------------------------------- Work Order
window.WO = Backbone.Model.extend({
    default: {
        wonum: null,
        part:  null,
        desc:  null,
        comment: null,
        order: null,
        section: null
    },
    url: "/rest/wo/"
});
window.WOView = Backbone.View.extend({
    tagName: "tr",
    className: "wo",
    events: {
        "keypress .woComment"      : "updateOnEnter"
    },
    initialize: function(options)
    {
         _.bindAll(this, 'render', 'close', 'updateOnEnter');
        this.render = _.bind(this.render, this);
        this.model.bind('change', this.render);
    },
    render: function()
    {
        $(this.el).html(this.woTemplate(this.model.toJSON()));
        this.input = this.$('.woComment');
        this.input.bind('blur', this.close);
        return this;
    },
    woTemplate: _.template($('#woTemplate').html()),
    close: function()
    {
        this.model.set({comment: this.input.val()});
        this.model.save({},{contentType: 'application/jason'});
    },
    updateOnEnter: function(e) {
        if (e.keyCode == 13) this.close();
    }
});
// ------------------------------------------------------------- Section 
window.SectionC = Backbone.Collection.extend({
    comparator: function(woObj)
    {
        return woObj.get('order');
    }
});
window.Section = Backbone.Model.extend({
    defaults: {
        id: null,
        name: null
    },
    events: {
        'update' : 'doOrder',
        'change' : 'doOrder'
    },
    url: "/rest/section",
    woc: null,
    initialize: function()
    {
        this.woc = new SectionC({model: window.WO});
    },
    add: function(woObj)
    {
        this.woc.add(woObj);
        this.doOrder();
    },
    doOrder: function()
    {
        console.log("Calling doOrder");
        var that = this;
        var sel = "#sec"+this.get('id')+" .wo";
        $(sel).each(function(i,elem)
        {
            var elemID = $(elem).attr('id');
            var woObj = that.woc.get(elemID);
            woObj.set({order: i});
        });
    },
});

window.SectionView = Backbone.View.extend({
    tagName: "table",
    className: "section",
    initialize: function()
    {
        _(this).bindAll('add','remove','change');
        this.render = _.bind(this.render, this);
        this.mySort = _.bind(this.mySort, this);
    },
    sectionTemplate: _.template($('#sectionTemplate').html()),
    render: function()
    {
        this._rendered = true;
        var that = this;
        $(this.el).empty();
        $(this.el).attr('id',"sec"+this.model.get('id'));
        var woData = null;
        _(this.models).each(function(woObj)
        {
            var wov = new WOView({
                model: woObj,
                id: woObj.get('wonum')});
            woData += wov.render().el;
        });
        $(this.el).html(this.sectionTemplate({woData: woData}));
        return this;
    },
    add: function(woObj)
    {
        woObj.set({section: this.model.id, id: woObj.get('wonum')});
        this.model.add(woObj);
        if(this._rendered)
        {
            var wov = new WOView({
                model: woObj,
                id: woObj.get('wonum')});
            $(this.el).append(wov.render().el);
        }
        //this.mySort();
    },
    change: function()
    {
        this.render();
    },
    mySort: function()
    {
        var that = this;
        var sel = "#sec"+this.model.get('id')+" .wo";
        $(sel).each(function(i,elem)
        {
            var elemID = $(elem).attr('id');
            var woObj = that.model.woc.get(elemID);
            woObj.set({order: i});
        });
    },
    saveSection: function()
    {
        var json = {};
        json.section = this.model.get('id');
        json.order = {};
        var sel = "#sec"+this.model.get('id')+" .wo";
        $(sel).each(function(i,elem)
        {
            json.order[i] = $(elem).attr('id');
        });
        console.log(json);
        _(this.model.woc.models).each(function(woObj)
        {
            if(woObj.get('id') != "" && woObj.get('id') != undefined)
                woObj.save();
        });
    }
});
// ---------------------------------------------------------------- Page
window.PageC = Backbone.Collection.extend({
    comparator: function(obj)
    {
        return obj.get('order');
    }
});

window.PageView = Backbone.View.extend({
    tagName: "div",
    className: "prodSchedPage",
    initialize: function()
    {
        _(this).bindAll('add');
        this.render = _.bind(this.render, this);
    },
    render: function()
    {
        var that = this;
        this._rendered = true;
        $(this.el).empty();
        // Loop through the sections and render them
        _(this.collection.models).each(function(secObj)
        {
            var v = new SectionView({model: secObj, id: secObj.get('id')});
            $(that.el).append(v.render().el);
        });
        return this;
    },
    add: function(sectionObj)
    {
        this.collection.add(sectionObj);
        if(this._rendered)
        {
            this.render();
        }
    },
    addSection: function(sectionObj){this.add(sectionObj);},
    addWO: function(secID,woObj)
    {
        var secObj = this.collection.get(secID);
        if(secID = undefined)
        {
            alert("Error: Section does not exist!");
            return;
        }
        secObj.add(woObj);
    }
});

window.PSPage = new window.PageC({});
window.PSPV   = new window.PageView({collection: window.PSPage});
$("body").append(window.PSPV.render().el);
//window.PSPV.add(new Section({id: 1, name: "Section 1"}));

Answer 1

实例化集合时，第一个参数是模型数组，第二个参数是选项。

window.PSPage = new window.PageC({});

当您传入 {} 时，构造函数通过 reset 方法将参数传递给 add 方法，并且 add 方法检查参数是否为数组，如果不是数组，则将 {} 添加为单一模型。主干0.5.1中的add方法在这里（0.3.3功能相同）：

add: function(models, options) {

  if (_.isArray(models)) {
    for (var i = 0, l = models.length; i < l; i++) {
      this._add(models[i], options);
    }
  } else {
    this._add(models, options);
  }
  return this;
},

如果你不向构造函数传递任何参数，你应该从一个空集合开始。

window.PSPage = new window.PageC();

Answer 2

我遇到了同样的问题，因为我需要将参数传递给我的集合构造函数。如果我查看我的集合实例，它会说有零个模型，但如果我使用 each() 进行迭代，它会找到我没有创建的幻像模型。

根据接受的答案，我返回并再次查看 API here。

我的代码现在看起来是这样的，它似乎避免了这个问题：

var myCollection = new MyCollection(new Array(), {
    setting1: "foo",
    setting2: "bar"
});

Answer 3

来自构造函数/集合初始化的主干文档：

new Backbone.Collection([models], [options])

这意味着，当你想用一些选项创建新的空集合时，你应该真正调用构造函数，第一个参数是空数组，而不是你的选项对象（我简化了一点@killthrush 代码，所以你不用输入'new Array()' 并使用 [] 代替）：

var myCollection = new MyCollection([], {
  setting1: "foo",
  setting2: "bar"
});

现在，在您的集合定义中，您应该能够访问选项对象：

var myCollection = Backbone.Collection.extend({
    // add model, url, etc here
    initialize: function (models, options) {
        // use options here, e.g.
       this.setting1 = options.setting1;
       this.setting2 = options.setting2;
    }
});