Bộ sưu tập backbone.js thêm phần tử trống khi được tạo?

Question

Tôi giả sử đây là một lỗi trong mã của tôi hoặc một tính năng không có giấy tờ (theo như tôi có thể tìm thấy) của backbone.js. Khi tôi tạo bộ sưu tập của mình và chế độ xem của tôi, đã có một mô hình trong bộ sưu tập mà tôi không tạo hoặc tôi cho rằng tôi không tạo do id không xác định. Dưới đây là mã của tôi.

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

Khi bạn khởi tạo bộ sưu tập, đối số đầu tiên là một mảng các mô hình, đối số thứ hai là các tùy chọn.

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

Khi bạn vượt qua trong {} hàm tạo sẽ chuyển đối số qua phương thức đặt lại cho phương thức thêm và phương thức thêm kiểm tra xem đối số có phải là mảng hay không khi mảng không thêm {} dưới dạng mô hình số ít. Add phương pháp trong xương sống 0.5.1 là ở đây (0.3.3 chức năng cùng một cách):

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

Nếu bạn không vượt qua bất kỳ đối số cho các nhà xây dựng, bạn nên bắt đầu với một bộ sưu tập trống.

window.PSPage = new window.PageC(); 

Answer 2

Tôi đã gặp sự cố tương tự vì tôi cần chuyển đối số cho người dựng bộ sưu tập của mình. Nếu tôi nhìn vào ví dụ bộ sưu tập của mình, nó nói rằng có 0 mô hình, nhưng nếu tôi lặp lại bằng cách sử dụng mỗi(), nó sẽ tìm ra mô hình ảo mà tôi không tạo ra.

Dựa trên câu trả lời được chấp nhận, tôi đã quay lại và xem lại API here.

Mã của tôi bây giờ trông như thế này, và có vẻ như để tránh vấn đề này:

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

Answer 3

Từ tài liệu xương sống cho constructor/khởi tạo các bộ sưu tập:

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

Điều này có nghĩa, rằng khi bạn muốn để tạo bộ sưu tập trống mới với một số tùy chọn, bạn nên gọi hàm dựng với đối số đầu tiên là mảng trống, không phải đối tượng tùy chọn của bạn (tôi đơn giản hóa mã bit @killthrush để bạn không nhập 'mảng mới()' và sử dụng [] thay vào đó):

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

Bây giờ, trong định nghĩa bộ sưu tập của bạn, bạn nên có một cái gì đó như để có thể truy cập vào đối tượng lựa chọn:

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