Question

我正在寻找一个与require.js一起使用的简单事件聚合器。我有两个模块，一个包含一个视图模型，另一个包含某种“监听器”：

// 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");
    });
});

那里有什么可以做到的吗？这种架构甚至是个好主意吗？这是我第一次涉足客户端架构。

Answer 1

这与你发布的内容类似，但是我在扩展Backbone事件方面运气很好（你实际上不必使用Backbone的其他任何东西来实现这一点），如下所示：

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');
        };

    };
});

最初的想法来自this article by Derick Bailey。我在客户端活动中的其他收藏之一是this one by Jim Cowart

同样，它几乎与您发布的内容完全相同。然而，我不喜欢将它绑定到jQuery文档DOM节点的方法的一件事是你可能还有其他类型的事件在那里飞过，从子节点冒出来等等。而通过扩展的主干事件你可以拥有自己的专用事件总线（如果您想要单独的数据事件与UI事件，甚至可以有多个事件总线）。

此示例中有关RequireJS的注意事项：Backbone和Underscore不兼容AMD，因此您需要使用shim config加载它们。

Answer 2

我最终使用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在他的answer中指出的那样，这将捕获document.body上的所有事件。在访问传递的回调函数中时，我还发现了一个范围问题。

简单的事件聚合器

2 个答案: