backbone.js：如何实例化集合/其他模型中的模型

Question

我仍然在学习Backbone，并且很难处理模型/集合之间的关系。我有一个相当复杂的嵌套集合结构（很像一个论坛系统，一个董事会可以有多个线程，可能有多个注释）。

基本上我试图做一个应用程序，将生成不同部分（标题，列表，表格等）内的多个选择器的CSS代码。这是我认为能够使结构感：

节（收集）>第（模型）>选择器（采集）> 选择（模型）

我的问题：我如何可以实例一个新的选择器，并把它放在一个选择器集合中，它将在一个集合中的一个节中？我必须手动完成这一切吗？

下面的代码我来了这么远：

// The selector model containing the styling properties 
window.Selector = Backbone.Model.extend({ 
    defaults: { 
     title: '', 
     classname: '', 
     locked: false, 
     comments: null, 
     properties: {}, 
     code: null, 
     type: 'text', 
     edited: false 
    } 
}); 

// The collection of selectors 
window.Selectors = Backbone.Collection.extend({ 
    model: Selector, 
    localStorage : new Store("selectors") 
}); 

// A section that can contain multiple selectors 
window.Section = Backbone.Model.extend({ 
    name: '', 
    selectors : new Selectors 
}); 

// The collection of sections 
window.Sections = Backbone.Collection.extend({ 
    model : Section, 
    localStorage : new Store("sections") 
}); 

// The view that will display the available selectors in the HTML template 
window.SelectorsCollectionView = Backbone.View.extend({ 
    el : $('#selectors-collection-container'), 

    initialize : function() { 
     this.template = _.template($('#selectors-collection-template').html()); 

     _.bindAll(this, 'render'); 

     this.render(); 
    }, 

    render : function() { 
     var renderedContent = this.template({ selectors : this.collection.toJSON() }); 
     $(this.el).html(renderedContent); 
     return this; 
    } 
}); 

这基本上就是我发现在其各自的集合手动实例化新的模型对象，并存储它们的唯一方法：

$(function() { 
    // Create the selectors available initially; they will be used 
    // by the view and put in the HTML template 
    var headings1 = new Selector({ title: 'h1', classname: 'alpha' }); 
    var headings2 = new Selector({ title: 'h2', classname: 'beta' }); 
    var headings3 = new Selector({ title: 'h3', classname: 'gamma' }); 
    var headings4 = new Selector({ title: 'h4', classname: 'delta' }); 
    var headings5 = new Selector({ title: 'h5', classname: 'epsilon' }); 
    var headings6 = new Selector({ title: 'h6', classname: 'zeta' }); 

    // Manually add the selectors to their collections 
    selectors = new Selectors().add([ headings1, headings2, headings3, headings4, headings5, headings6 ]); 

    // Now create a new section that will contain and represent 
    // the previous selectors collection 
    var headings = new Section({ name: 'headings' }); 


    /* Now we should have something like this: 
    * Selectors: headings1 ... headings6 
    * Section: headings 
    */ 


    // Now create another selector 
    var list_item = new Selector({ title: 'li', comments: 'default style for the list-items' }); 

    // Manually add the list-item selector to a new collection 
    // that will belong to a different section 
    var selectors2 = new Selectors().add([ list_item ]); 

    // Add the list collection to it's section 
    var lists = new Section({ name: 'lists' }); 

    // Finally create a sections collections containing 
    // all the different selector sections 
    var sections = new Sections().add([ headings, lists ]); 


    /* Now we should have something like this: 
    * Selectors: headings1 ... headings6 
    * Section: headings 
    * 
    * Selectors: list_item 
    * Section: lists 
    */ 

    // Call the view and render the available selectors from the 
    // sections collection 
    var selectorsView = new SelectorsCollectionView({ collection : sections }); 
    selectorsView.render(); 
}); 

Answer 1

从我能从你的问题推断，也许这些例子可能会有帮助：

var headingsSelectors = new Selectors([{ title: 'h1', classname: 'alpha' }, { title: 'h2', classname: 'beta' }]); 
var headingsSection = new Section({ name: 'headings', selectors: headingsSelectors }); 

// later you can do something like headingsSection.selectors.add([{ whatever }]); 

var listingSelectors = new Selectors([{ title: 'li', comments: 'default style for the list-items' }]); 
var listsSection = new Section({ name: 'lists', selectors: listingSelectors }); 

var sections = new Sections([headingsSection, listsSection]);