backbone.js - libreria - underscore empty object

La colección backbone.js agrega un elemento vacío cuando se crea?

Question

Estoy asumiendo que esto es un error en mi código o una característica no documentada (hasta donde pude encontrar) de backbone.js. Cuando creé mi colección y mi vista ya hay un modelo en esa colección que no creé, o asumo que no creé debido a la identificación indefinida. A continuación se muestra mi código.

// ---------------------------------------------------------- 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

Cuando crea una instancia de la colección, el primer argumento es una matriz de modelos, el segundo argumento es opciones.

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

Cuando se pasa {}, el constructor pasa los argumentos a través del método de restablecimiento al método de adición y el método de adición comprueba si el argumento es una matriz y, cuando no, una matriz agrega {} como un modelo singular. El método de agregar en la red troncal 0.5.1 está aquí (0.3.3 funciona de la misma manera):

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;
},

Si no pasa ningún argumento al constructor, debe comenzar con una colección vacía.

window.PSPage = new window.PageC();

Answer 2

De la documentación del backbone para el constructor / inicialización de colecciones:

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

Esto significa que cuando desee crear una nueva colección vacía con algunas opciones, debería llamar al constructor con el primer argumento para que sea una matriz vacía, no su objeto de opciones (simplifico un poco el código @killthrush para que no escriba ''nueva matriz () ''y usa [] en su lugar):

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

Ahora, en su definición de colección, debería tener algo como poder acceder al objeto de opciones:

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

Answer 3

Me estaba topando con el mismo problema porque necesitaba pasar argumentos a mi constructor de colección. Si miro en mi instancia de colección, dice que hay cero modelos, pero si itero usando cada (), encuentra ese modelo fantasma que no creé.

Basándome en la respuesta aceptada volví y miré la API de nuevo here .

Mi código ahora se ve así, y parece evitar este problema:

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