web-dev-qa-db-ja.com

ビューのバックボーン変更モデル

私はBackboneにかなり慣れていないので、次の質問があります。

モデルのコレクションがあります。

タブを表示するコレクションビューがあります（コレクション内の各モデルのビューがあります）。

モデル（コンテンツ用）のビューがあります。

ルート付きのルーターがあります。

私が達成しようとしているのは、 http://jqueryui.com/demos/tabs/ のような機能です。

タブ（コレクションのモデル）をクリックしてから、モデルをコンテンツビューに渡したい場合は、モデルを変更して、コレクションに変更を反映します。

私は4つの解決策を思いついた：

ルーター内：

'switchCommunity': function(id) {
        // (a) set new model attributes
        this.view.community.model.set(communities.get(id));

        // (b) replace model
        this.view.community.model = communities.get(id);

        // (c) a custom function of the view changes its model
        this.view.community.changeModel(communities.get(id));

        // (d) a new view
        this.view.community = new View({
            model: communities.get(id)
        })
}

ここでの問題は

  • （a）コレクション内のモデルへの変更を反映していません

  • （b）完全に新しいモデルであるため、ビューの初期化関数のバインドがトリガーされないため、イベントをトリガー（変更）しません。

  • （c）私にはハックのようです

  • （d）タブをクリックするたびに、新しいビューが作成されます（これはパフォーマンスの問題ですか？）

ここでのベストプラクティスは何ですか？

javascriptmodel-view-controllerviewmodelbackbone.js
26
Riebel

あなたの解決策の1つは大丈夫に近いです：D

これがあなたが望むものです：

this.view.community.model.set(communities.get(id).toJSON());

そして、これはmodel.on（ "change"）もトリガーします。

15
zsitro

なぜ（c）はハックだと思いますか？古いモデルのバインドを解除し、新しいモデルを接続するのに適した場所のようです。

8
Paul Hoenecke

Backbone.Marionette プラグインは、問題の合理化されたソリューションを提供します。

これは、アプリケーションの初期化、ビューの管理、およびイベントの集約のための機能を提供します。

本質的に、それは複数のビューを隠したり表示したりすることから苦痛を取り除きます。

あなたはこれを読むことができます ブログ投稿 それについてもっと学ぶために。

1
Paul

簡単に言うと、dを使用する必要があります。はいはパフォーマンスが良くありませんが、ユーザーインターフェイスの速度低下に気付かない限り、あまり心配する必要はありません。 1.常に機能するものをコーディングする必要があります。2。コーディングに時間がかからないため、他のより重要な機能のコーディングに進むことができます。

より多くのパフォーマンスが必要な場合は、cを実行するために余分な時間をかけることができます。最もパフォーマンスが高いためには、テンプレートを破棄して再レンダリングしないでください。 jqueryを使用して、DOM上の要素を手動で検索し、それらを新しいモデルに置き換える必要があります。電話をかけるとき：

view.$el = _.template(string, model);

これは非常に小さなコードですが、ブラウザーには多くの作業が必要です。 DOMを新しいモデルに置き換えると、パフォーマンスが大幅に向上します。

よりパフォーマンスが必要な場合は、オブジェクトプーリングを使用できます。私は多くの最適化を実装するバックボーン用のPerfViewに取り組んできました。 https://github.com/puppybits/BackboneJS-PerfView 最高のブラウザーパフォーマンスを維持するための多くのベストプラクティスを含むコメントがコードにあります。

0
puppybits