0

目標は次のとおりですparent。モデルがあります。というコレクションに入っていparentsます。のparentコレクションですchildren。したがって、コレクションをインスタンス化すると、それぞれに のコレクションを持つモデルparentsが取得されます。parentchildren

これをいくつかの異なる方法で実行しようとしましたが、異なるパフォーマンスが得られました。childrenまったく表示されないこともあります。parent場合によっては、レンダリング ループの反復ごとに繰り返されます。これを行うためのベストプラクティスについてのヘルプを探しています。

のリストはchildren変更されるべきではなく、毎回同じコレクションである必要があります。後でその場で違いをフィルタリングできます。

データをプルするだけでできる限り単純になるようにそれを削除しました。何が起こる必要があるかを明確にするために、他の余分なものは含まれていません。

childrenコレクションを 2 回読み込みます。(まあ、多くの場合ですが、parentコレクションで 1 回、各parentモデルで 1 回です)。これは、新しい「親」を追加して子にアクセスできるようにするためです。これにより、保存する前に「親」モデルに子を追加できます。

質問：

  • Childrenが 1 回だけ読み込まれるようにするにはどうすればよいParent ですか?
  • Children1 つのコレクションをコレクションにロードするにはどうすればよいParents ですか?
  • これはこれを行う正しい方法ですか？

モデル:

$(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();
});

私の見解:

$(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;
        }
    });
});

ルーター:

$(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();
});
4

1 に答える 1

0

結局のところ、それを行うにはいくつかの異なる方法があります。親モデルの初期化メソッドで子コレクションをインスタンス化してレンダリングすることにしました。

于 2013-11-06T15:17:01.150 に答える