Loading collections into models in backbone.js

问题

Here's the goal: I have a parent model. It is in a collection called parents. In a parent is a collection of children. So, when I instantiate the parents collection, I get the parent models, each with the collection of children in them.

I've tried doing this several different ways, and I'm getting different performance. Sometimes the children don't show up at all. Sometimes, they are repeated for each iteration of the parent render loop. I'm looking for help on what the best practice is for doing this.

The list of children shouldn't change, it should be the same collection each time. I can filter for differences later, on the fly.

I've stripped it down to be as simple as possible to just pull data, no other extras are included to make it clear what needs to happen.

I load the children collection twice. (Well, lot's of times, but once in the parent collection and once in each parent model). This is so that I can add a new 'Parent' and have access to the children so I can add them to the 'Parent' model before saving.

THE QUESTIONS:

• How to I make sure that the Children are loaded into the Parent only once?
• How do I load one Children collection into the Parents collection?
• Is this the right way to do this?

Models:

$(function() {
    window.Child = Backbone.Model.extend({});
    window.Children = Backbone.Collection.extend({
        model: Child
    });
    window.Parent = Backbone.Model.extend({
        initialize: function() {
            this.children = new Children();
            children.fetch();
        }
    });
    window.Parents = Backbone.Collection.extend({
        model: Parent
        initialize : function() {
            this.childrenAll = new Children();
            this.childrenAll.fetch();
        }
    });
    // instantiate the collections
    window.parents = new Parents();
});

My Views:

$(function() {
    window.ChildView = Backbone.View.extend({
        className: "child-item",
        template: _.template($('#child-template').html()),
        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });
    window.ChildrenView = Backbone.View.extend({
        className: 'children',
        template: _.template($('#children-template').html()),
        initialize: function() {
            _.bindAll(this, 'render');
            this.collection.bind('reset', this.render);
        },
        render: function() {
            this.$el.html(this.template());
            this.collection.each(function(child) {
                var view = new ChildView({ model:child });
                $('.children-list').append(view.render().el);
            });
            return this;
        }
    });
    window.ParentView = Backbone.View.extend({
        className: "parent",
        template: _.template($('#parent-template').html()),
        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.children = new Children({ collection: children });
            $('.children-list').html(this.children.render().el);
            return this;
        }
    });
    window.ParentsView = Backbone.View.extend({
        el: "#app",
        template: _.template($('#parents-template').html()),
        initialize: function () {
            _.bindAll(this, 'render', 'add');
            this.collection.bind('reset', this.render);
        },
        render: function() {
            this.$el.html(this.template());
            this.childrenView = new ChildrenView({ collection: children });
            $('.children-new').append(this.childrenView.render().el);
            this.collection.each(function(parent){
                var view = new ParentView({ model: note });
                $('#items-list').prepend(view.render().el);
            });
            return this;
        }
    });
});

The Router:

$(function() {
    window.ParentsRouter = Backbone.Router.extend({
        routes: {
            '': 'list'
        },
        initialize: function() {
            // starts by assigning the collection to a variable so that it can load the collection
            this.parentsView = new ParentsView({
                collection: parents
            });
            parents.fetch({ reset: true });
        },
        list: function () {
            $('#app').empty();
            $('#app').append(this.parentsView.render().el);
        }
    });

    window.parentsRouter = new ParentsRouter();
    Backbone.history.start();
});

回答1:

Turns out, there are several different ways to do it. I've opted to instantiate and render the child collection in the initialize method of the parent Model.

来源：https://stackoverflow.com/questions/19736211/loading-collections-into-models-in-backbone-js