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