How to handle initializing and rendering subviews in Backbone.js? Ask Question

Hopefully it's pretty obvious how the HTML matches up with the diagram.

The ParentView holds 2 child views, InfoView and PhoneListView as well as a few extra divs, one of which, #name, needs to be set at some point. PhoneListView holds child views of its own, an array of PhoneView entries.

So on to your actual question. I handle initialization and rendering differently based on the view type. I break my views into two types, Parent views and Child views.

The difference between them is simple, Parent views hold child views while Child views do not. So in my example, ParentView and PhoneListView are Parent views, while InfoView and the PhoneView entries are Child views.

前に述べたように、これら 2 つのカテゴリの最大の違いは、レンダリングが許可されるタイミングです。理想的な世界では、Parentビューは 1 回だけレンダリングされるようにします。モデルが変更されたときの再レンダリングは、子ビューによって処理されます。Child一方、ビューは、他のビューに依存していないため、必要なときにいつでも再レンダリングを許可します。

もう少し詳しく説明すると、ビューの場合、関数で次のことを行うのParentが好みです。initialize

1. 自分のビューを初期化する
2. 自分のビューをレンダリングする
3. 子ビューを作成して初期化します。
4. 各子ビューにビュー内の要素を割り当てます (たとえば、 がInfoView割り当てられます#info)。

ステップ 1 は、説明の必要もほとんどありません。

ステップ 2 のレンダリングは、子ビューが依存するすべての要素が、割り当てる前にすでに存在するように行われます。こうすることで、すべての子がevents正しく設定されることがわかり、再委任の必要性を心配することなく、ブロックを何度でも再レンダリングできます。renderここでは実際には子ビューは使用せず、子ビューが独自の 内で実行できるようにしますinitialization。

ステップ 3 と 4 は、実際には子ビューの作成時に渡すと同時に処理されますel。親が自身のビューのどこに子がコンテンツを配置できるかを決定する必要があると思うので、ここで要素を渡すのが好きです。

レンダリングについては、ビューをかなりシンプルに保つようにしていますParent。render関数には親ビューのレンダリング以外の何も実行させないようにします。イベント委任や子ビューのレンダリングなどは一切行いません。単純なレンダリングだけです。

しかし、これが常に機能するとは限りません。たとえば、上記の例では、#nameモデル内の名前が変更されるたびに要素を更新する必要があります。ただし、このブロックはテンプレートの一部でありParentView、専用のビューで処理されないため、その点Childを回避します。subRenderのみ要素のコンテンツを置き換え#name、要素全体を破棄する必要がなくなります#parent。これはハックのように思えるかもしれませんが、DOM 全体を再レンダリングしたり、要素を再アタッチしたりするよりも、この方法の方が効果的だとわかりました。本当にきれいにしたい場合は、ブロックを処理する新しいChildビュー ( に似たものInfoView)を作成します#name。

さてChild、ビューについては、はビューinitializationと非常に似ていますParentが、それ以上のビューは作成されませんChild。つまり、次のようになります。

1. ビューを初期化する
2. セットアップは、私が関心のあるモデルの変更をリッスンするようにバインドします
3. ビューをレンダリングする

Childビューのレンダリングも非常にシンプルで、レンダリングして my のコンテンツを設定するだけですel。この場合も、委任などに煩わされることはありません。

以下に、私のコード例をいくつかParentView示します。

var ParentView = Backbone.View.extend({
    el: "#parent",
    initialize: function() {
        // Step 1, (init) I want to know anytime the name changes
        this.model.bind("change:first_name", this.subRender, this);
        this.model.bind("change:last_name", this.subRender, this);

        // Step 2, render my own view
        this.render();

        // Step 3/4, create the children and assign elements
        this.infoView = new InfoView({el: "#info", model: this.model});
        this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
    },
    render: function() {
        // Render my template
        this.$el.html(this.template());

        // Render the name
        this.subRender();
    },
    subRender: function() {
        // Set our name block and only our name block
        $("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
    }
});

var InfoView = Backbone.View.extend({
    initialize: function() {
        // I want to re-render on changes
        this.model.bind("change", this.render, this);

        // Render
        this.render();
    },
    render: function() {
        // Just render my template
        this.$el.html(this.template());
    }
});