ええ、あなたは正しい軌道に乗っていると思います。データはすべて同じであるため、そのデータを表示する方法に応じて、1 つのモデルと個別のビューのみを使用することは理にかなっています
私は提案します:
- 1 モデル (ボックス)
- 1 コレクション (ボックス)
- 3 つのビュー (コレクション用の「含む」ビュー 1 つ (BoxesView)、bigBox 用のビュー 1 つ (BigBoxView)、smallBox 用のビュー 1 つ (SmallBoxView))
BoxesView の render 関数で、コレクションを反復処理する際に、IsBig をチェックし、それに応じて各ビューをレンダリングします。
//render function of BoxesView. Make sure to have a reference to
//your Boxes collection
render: function() {
var that = this;
this.collection.each(function(model) {
//depending on the isBig property render a different view
if(model.get("isBig") === true)
var bigView = new BigView({
model: model
});
that.$el.append(bigView.render().el);
// $el is the element you want to append all your boxes into
else {
var smallView = new SmallView({
model: model
});
that.$el.append(smallView.render().el);
}
}
}
または、bigBox と smallBox の動作がどの程度似ているか(まったく同じ情報を表示し、まったく同じアクションを実行するか) によっては、ビューを作成するときに BoxView を 1 つだけ使用し、異なるテンプレートを渡すだけでも意味がある場合があります。 .