1

我仍在学习 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();
});
4

1 回答 1

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]);
于 2012-05-22T03:29:25.910 回答