1

私は小さなバックボーン アプリケーションに取り組んでいます。

現在、特定のアイテムのプロファイルを表示したいという問題があります。

この showProfile イベントは、リスト項目をクリックするとトリガーされます。showProfile イベントは、親の listView に通知する必要はありません。これは、上記の sidebarView に通知し、mainView に通知します。これは、profileView をインスタンス化できるようになりました。

これには、イベント チェーンに 3 ～ 4 つのビューが含まれます。この問題の回避策はありますか?

よろしく、ボードー

4

2 に答える 2

3

それが最善の方法かどうかはわかりませんが、この種のシナリオでは、Backbone.Events を拡張するイベント プロパティを持つオブジェクトを作成することで、アプリケーション レベルのイベント アグリゲーターを使用しました。

私は、アプリケーション全体の設定を保存するためにも同じオブジェクトを使用する傾向があります。

var app = {
    settings: {},
    events: _.extend({}, Backbone.Events),
};

次に、すべての親ビューをバブリングすることなく、ビューから showProfile イベントをトリガーし、mainView で app.event にバインドできます。

RequireJS を使用する場合、ビューの依存関係となるアプリ モジュールを作成します。

define([
    "jquery",
    "underscore",
    "backbone"
],

function($, _, Backbone) {
   var app = {
       root: "/",
       settings: {},
       events: _.extend({}, Backbone.Events),
   };

 return app;

});

また、ビューでルーターにアクセスする必要がある場合に備えて、ルーターを app オブジェクトに配置する傾向があるため、 main.js ( backbone-boilerplate のように):

require([
   "app",
   "router",
],

function(app, Router) {
    app.router = new Router();
    Backbone.history.start({ pushState: true, root: app.root });
});

イベント アグリゲーターに関する Derick Bailey のブログ記事を読むことをお勧めします。

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/

于 2012-11-03T15:37:10.207 に答える
0

同意しましたが、この種のことには多くの定型文が関係しています。私が試した1つのアプローチは、以下に定義するような（表示）方法を使用してこれを最小化することです。

/**
 * Helper to facilitate event-bubbling, that is to say, the scenario where a view
 * binds a callback to a child-View event only to retrigger it, mimicking the
 * inherent event bubbling mechanism of the DOM. Allows renaming of the bubbled
 * event as well as modification of the bubbled arguments
 *
 * @param view The View-dispatcher of the event
 * @param ev Name of the event to bubble
 * @param opts A hash of options where:
 *   bubbleName: New name of the event to bubble in case the event should be
 *   renamed. Optional
 *   args: The arguments to bubble:
 *    - When absent, the original arguments will be bubbled.
 *    - When set to a non-function value or an array-of-values, this value or
 *      values will be bubbled
 *    - When set to a function, it will be invoked on the incoming arguments and
 *      its returned value will be treated as in the previous case.
 */
bubbleEvent: function (view, ev, opts) {
  if (!opts) { opts = {}; }
  view.bind(ev, function () {
    var inArgs = _.toArray(arguments),
        bubbleArgs = _.isFunction(opts.args) ? 
          opts.args.apply(this, inArgs) : (opts.args || inArgs),
        bubbleName = opts.bubbleName || ev;
    this.trigger.apply(this, [bubbleName].concat(bubbleArgs));
  }, this);
}

これは、他のすべてのビューが拡張するBaseViewのメンバー関数になります。そのため、アプリのすべてのビューで利用できます。したがって、ParentViewが、所有されているchildViewによってトリガーされたイベントを単純にバブルするには、必要なのは

bubbleEvent(childView, "event");

それでも、これはいくつかの定型文を導入するので、私もこの問題に対する他の解決策を見たいと思います。

于 2012-11-09T02:18:34.323 に答える