3

require.js で動作するシンプルなイベント アグリゲーターを探しています。ビューモデルを含むモジュールと、ある種の「リスナー」を含むモジュールの 2 つがあります。

// view model
define(['lib/knockout-2.2.1', 'events/aggregator'], function(ko, events){

    var squareViewModel = function(contents) {
        this.click = function(){
            events.publish('squareClicked', this);
        };
    };

    return squareViewModel;
});

// some listener of some kind
define(['events/aggregator'], function(events){
    events.subscribe('squareClicked', function(e){
        alert("hurrah for events");
    });
});

これを行うものはありますか？この種のアーキテクチャは良いアイデアですか? これは、クライアント側アーキテクチャへの私の最初の進出です。

4

2 に答える 2

4

これはあなたが投稿したものと似ていますが、私はバックボーン イベントを拡張することで幸運に恵まれました (これが機能するためにバックボーンについて実際に何かを使用する必要はありません)。次のようなものです。

define(['underscore', 'backbone'], function( _, Backbone ) {
    var _events = _.extend({}, Backbone.Events);
    return _events;
});

そして、すべてのビューモデル (または実際のコード) でそれを使用できます。

define(['knockout', 'myeventbus'], function(ko, eventBus){

    return function viewModel() {
        eventBus.on('someeventname', function(newValue) { 
        // do something
        });

        this.someKOevent = function() {
            eventBus.trigger('someotherevent', 'some data');
        };

    };
});

元のアイデアは、Derick Bailey によるこの記事から生まれました。クライアント側のイベントで私の他のお気に入りの 1つは、Jim Cowart によるものです。

繰り返しますが、それはあなたが投稿したものとほぼ同じになります。ただし、それを jQuery ドキュメント DOM ノードに結び付けるアプローチについて私が気に入らないことの 1 つは、他のタイプのイベントもそこを通過したり、子ノードからバブルアップしたりする可能性があることです。一方、拡張バックボーン イベントによって、独自の専用イベント バスを使用できます (データ イベントと UI イベントを分けたい場合は、複数のイベント バスを使用することもできます)。

この例の RequireJS に関する注意: Backbone と Underscore は AMD と互換性がないため、shim configを使用してそれらをロードする必要があります。

于 2013-04-23T01:04:30.777 に答える
1

私は最終的にjQueryを使用して自分で作成しました：

define([], function(){
    return {

        publish: function (type, params){
            $(document.body).trigger(type, params);
        },

        subscribe: function(type, data, callback){
            $(document.body).bind(type, data, callback);
        },
    };
});

それは私が望むもので動作しますが、広範囲にテストされていません.

explunit が彼の答えで指摘しているように、これは 上のすべてのイベントをキャプチャしますdocument.body。thisまた、渡されたコールバック関数内にアクセスする際のスコープの問題も発見しました。

于 2013-04-22T05:51:12.773 に答える