2

イベントを添付しようとしていますが、別のビューからのものです

私には2つのビューがあります

  • ヘッダービュー
  • contentView

私の headerView はヘッダー モデルを使用します。モデルが変更されるたびに、私の headerView を render() します。

iPhone のほとんどのアプリと同様に、ナビゲーション用にヘッダーの 2 つのボタンを使用します。現在の場所に応じて、画像が変更されます。

これが、ランダムな contentView を初期化すると、headerView でモデルにアクセスしてプロパティを変更できる理由です。

最後に、このボタンのクリック イベントを作成する必要があります。

コンテンツ ビューでバインドしようとしています (より理にかなっています)。

events: {
   "click .h_left": "newLocation",
}

イベントが発生しません。このイベントを headerView に配置した場合にのみ発生します。そうするための推奨されるクリーンなソリューションはありますか?

4

1 に答える 1

10

の要点はBackbone.View、DOM サブツリーの変更とイベント処理を View クラスにカプセル化することです。そのため、バックボーンはあなたのシナリオをサポートしていません。

同じ最終結果を得るには、いくつかのオプションがあります。

シンプルな (しかし間違った) 方法: jQuery を使用してヘッダーのイベントをリッスンします。

var ContentView = Backbone.View.extend({
   initialize: function() {
     $(".h_left").on('click', this.newLocation);
   },

   remove: function() {
     $(".h_left").off('click', this.newLocation);
     Backbone.View.prototype.remove.call(this);
   }
});

これにより、ヘッダー要素のカプセル化が破られ、コンテンツ ビューがヘッダー要素の実装に緊密に結合されます。言い換えれば、スパゲッティ。

正しい方法: メディエーターを使用して、ヘッダーから他のビューにメッセージを渡します。

var HeaderView = Backbone.View.extend({
  events: {
    "click .h_left": "onLeftButtonClick"
  },

  onLeftButtonClick: function() {
    //You can use the root Backbone object as a global event bus
    //Publish a message
    Backbone.trigger('header:leftbutton');
  }
});

var ContentView = Backbone.View.extend({
   initialize: function() {
     //Subscribe to a message. If you use listenTo, the subscription is 
     //automatically cleared when your content view is destroyed.
     this.listenTo(Backbone, 'header:leftbutton', this.newLocation);
   },

   newLocation: function() {
     //..
   }
});
于 2013-03-14T10:21:48.093 に答える