0

次のようなショッピングカートのチェックアウトプロセスを本質的に模倣する一連のページ状態があります。

var ItemsCollection = Backbone.Collection.extend({
    model: ItemModel,    
    url "/items" 
});

var ItemsView = Backbone.View.extend({
    // Select item on click event here
});

var ItemsApp = Backbone.View.extend({
    // Fetch collection of items and render each ItemsView

});

アイテムが選択されたら、本質的に状態を変更して、そのアイテムのセラーをレンダリングしたいと考えました。アーキテクチャは次のようになります。

var SellersCollection = Backbone.Collection.extend({
    model: SellersModel,    
    url "/sellers" // The item ID is stored in a session NOT in the url (So permalinks work) 
});

var SellersView = Backbone.View.extend({
    // Select item on click event here
});

var SellersApp = Backbone.View.extend({
    // Fetch collection of sellers and render each SellersView

});

これら 2 つの状態が与えられた場合、Sellers コレクションをインスタンス化し、Sellers を取得してビューをレンダリングするためのベースとなる場所はどこでしょうか?

私は基本的に、SellersApp ビューと ItemsApp ビューを 1 つに組み合わせて、レンダリングするサブビューとフェッチするコレクションを決定する一種のコントローラーとして機能することを考えていました。そのようにする場合、メインアプリの名前空間で両方のコレクションをインスタンス化し、必要に応じてコレクションを取得するか、対応する状態 (url) が呼び出されたときにのみ各コレクションをインスタンス化する必要があります。後者のアプローチはデメテルの法則に違反していると思います。

どうすればいいと思います。

// 1. Instantiate outside the view
var MainApp  = Backbone.View.extend({

     attributes: {
         "page": "items"
     },

     items: function(){
        // Fetch items collection and render view (listenTo used in initialize)
     },

     sellers: function() {
          // Fetch sellers
     }

});

Items = new ItemsCollection;
Sellers = new SellersCollection;

これは良いアプローチですか？それが良いアプローチである場合、状態を変更するように MainApp に指示する必要があります。つまり、メイン アプリのフェッチ コレクション メソッドを明示的に呼び出す必要があります (つまり
、ItemsView の「クリック」イベントで、ItemsApp.sellers を明示的に宣言する必要があります)、またはリスナーを使用する必要があります。アイテムが選択されるのを自動的にリッスンするメイン アプリ ビューで。

私は基本的に、router.navigate - トリガーを使用し、ルーターを使用して各ビュー/コレクションをインスタンス化する代替手段を探しています。これは良い習慣ではないと聞いています。

4

1 に答える 1

1

残念ながら、バックボーン (特にバックボーン ビュー) では、実際に「適切な」方法で処理を行う方法はありません。参照規則はありません。バックボーンを使用する多くの人は、モデル/コレクションのみを使用し、ビューをまったく使用しません。

私の意見では、実際に何か重要なことをしていない限り、コレクションのビューを持つことをやめます。階層 App > ModelCollection+ModelViewCollection を使用します。

だからあなたの場合：

ItemsApp (Backbone.View)
--ItemCollection (Backbone.Collection)
  --Item (Backbone.Model)
    -- SellerCollection (Backbone.Collection)
--ItemViewCollection (Array)
  --ItemView (Backbone.View)
    -- SellerViewCollection (Array)

したがって、ItemCollection が変更されると、ItemsApp は ItemView を作成および破棄します (イベントをリッスンします)。

ItemView は、イベントに基づいてユーザーがいつそれを選択したかを知る責任があります。次に、モデルが選択されたときに、そのモデルに SellerCollection を設定することを選択できます。選択を解除すると、そのコレクションがクリアされる可能性があります。また、SellerCollection の変更をリッスンし、各セラーのビューを追加および削除します。

Backbone.Views のリストを格納するための組み込みメソッドはないと思います。おそらく、独自の配列を作成したいだけでしょう。モデル自体はそのビューへの参照を持つべきではないため、ビューを追跡するのはあなた次第です。

一種のメッセージング システムとして機能するグローバル イベント オブジェクトを用意する価値があります。Backbone.View は Backbone.Events を実装しているため、アプリ オブジェクトをグローバルに宣言してから、任意のイベントをリッスンできます。ただし、必要な場合にのみ使用する必要があります。それ以外の場合は、イベントをグローバルにトリガーするのではなく、イベントを直接リッスンする必要があります。たとえば、ItemView には「戻る」というイベントを発生させる「戻る」ボタンがあり、AppView はアクティブな ItemView のイベントをリッスンしており、戻りたい場合は AppView が必要な変更を行います。 DOM に移動し、そのアイテムの選択を解除します。

于 2013-08-16T16:53:21.027 に答える