主干.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]);