1

Bckaboneビュー製品があります:

Product = Backbone.View.extend({
    templateBasic: _.template($("#pcard-basic").html()),
    templateFull: _.template($("#pcard-full").html()),
    initialize: function() {
       this.render(this.templateBasic);
    },
// ...

これが私のドラフトです：http://jsfiddle.net/challenger/xQkeP/73

完全なテンプレートを表示するためにそれらのいずれかが選択/選択解除されたときに、他のビューを非表示/表示して、コンテナの幅全体に拡張できるようにするにはどうすればよいですか?

コレクション全体にビューを使用する必要がありますか? イベント処理はどのように処理すればよいですか?

ありがとう！

編集

それが私の最終案です: http://jsfiddle.net/challenger/xQkeP/

しかし、よりエレガントな方法で同じ結果を達成できるかどうかはまだわかりませんか? 兄弟を非表示にすることは、それを解決する最良の方法ではないと思います。

viewBasic: function(e) {
    e.preventDefault();
    this.render(this.templateBasic);
    if(this.switchedToFull) {
        this.$el.siblings().show();
        this.switchedToFull = false;
    }
},
viewFull: function(e) {
    e.preventDefault();
    this.render(this.templateFull);
    this.$el.siblings().hide();
    this.switchedToFull = true;
}
4

1 に答える 1

0

私の理解が正しければ、コレクション内のすべてのモデルを 2 つの異なる方法で表示し、それらをユーザーに提示する方法を選択できるようにしたいと考えていますよね?

これを行う 1 つの方法は、ユーザーの選択が行われるメイン ビューを作成することです。ユーザーが、別のテンプレートを使用してコレクションからすべてのモデルをレンダリングするそのビューからメソッドをトリガーする必要があると判断した場合。メイン ビューには、各モデル ビューを追加するコンテナー (テーブル、div、ul など) が必要です。

したがって、最終的には、ビューを表示する必要があります。ユーザーの選択を処理するコレクションのコンテナーとして機能するもの。次に、コレクションから単一のモデルをレンダリングする別のビューがあります。このビューには、使用できるテンプレートが必要です。メイン ビューでは、ユーザーの決定に応じて異なるテンプレートを使用してコンテナーに追加するモデルごとに新しいビュー インスタンスを作成するコレクションを反復処理します。

于 2013-02-27T12:51:45.173 に答える