共享事件的两个视图答案

【问题标题】：Two Views Sharing an Event共享事件的两个视图
【发布时间】：2015-06-22 18:05:10
【问题描述】：

我被投入到 Backbone 代码库中，我需要进行的修改之一需要使用预先输入的方式复制文本元素。我不想复制和粘贴代码，而是想重新使用事件代码，但由于我对 Backbone 几乎一无所知，我不确定应该如何完成。应该是帮手吗？如果是这样，我应该将帮助代码放在哪里，以便两个视图都可以使用它？如果可能的话，我宁愿不尝试视图继承，因为我想让更改尽可能简单和最小。

events: {
  // all other events removed for conciseness.
  'typeahead:selected #ud_producerid': 'producerChanged'
}

我需要在 producerChanged 函数中具有相同功能的相同事件以及将 typeahead 连接起来以在 2 个不同视图中工作的 setupBindings 代码。

【问题讨论】：

您并没有真正为我们提供足够的信息来提供帮助，但解决方案似乎应该很简单。创建一个管理 textarea 的视图，然后将该视图实例化两次。页面上有两个文本区域，并且没有重复代码
抱歉信息不足。再次，第一次处理 Backbone。谢谢你的建议。这并不是说我需要两次在同一页面上的文本元素，我需要在 2 个不同的页面之间共享它的功能。所以把它想象成一个“组件”。我不想复制代码。这更有意义吗？

标签： backbone.js backbone-views backbone-events

【解决方案1】：

我知道你说过你不想在这里使用继承，但它在 Backbone 中很容易并且非常适合这项任务。

var TypeaheadBase = Backbone.View.extend({
    events: {
         'typeahead:selected #ud_producerid': 'producerChanged'
    },

    producerChanged: function(e) {
        ...
    },

    anotherBaseMethod: function() {
        ...
    }
});

var TypeaheadBaseA = TypeaheadBase.extend({
    someOtherAMethod: function() {
        ...
    },

    // You can do some extra functionality on `producerChanged`.
    // (Or you can override by not calling the Base prototype).
    producerChanged: function() {
        TypeaheadBase.prototype.producerChanged.apply(this, arguments);
        // Do some additional stuff.
    }
});

var TypeaheadBaseB = TypeaheadBase.extend({
    // You can also extend things like events, which could be a hash (Object).
    events: function() {
        var parentEvents = _.result(TypeaheadBase.prototype, 'events');
        return _.extend({}, parentEvents, {
            'click a': 'someClickEvent'
        });
    },

    someClickEvent: function() {
        ...
    }
});

【讨论】：