1

我想知道处理以下情况的最佳方法是什么。想象一下,我们有一组记录,每个记录都将附加到一个视图。每个视图都有一个运行特定功能的按钮。出于争论的目的,页面上一次最多可以有一百个这样的视图。此视图的示例如下:

var RecordView = Backbone.View.extend({
    events: {
        'click .js-cta': 'onCTAClick'
    },
    onCTAClick: function(event) {
        // Do something.
    }
});

这显然会绑定 100 个 DOM 侦听器并占用比我们想要的更多的内存。处理此问题的一种方法是为集合创建一个视图,并在该级别放置一个委托侦听器,这将确定应通知哪个视图,然后触发一个事件,如下所示:

var CollectionView = Backbone.View.Extend({
    events: {
        'click .js-cta': 'onCTAClick'
    },
    onCTAClick: function(event) {
        // Use event data to determine appropriate child view to notify.
        // Notify the child view by triggering an event on it (childView.trigger('CTAClick')).
    }
});

var RecordView = Backbone.View.Extend({
    initialise: function() {
        this.on('CTAClick', this.onCTAClick);
    },
    onCTAClick: function(event) {
        // Use event data to determine appropriate child view to notify.
        // Notify the child view by triggering an event on it (childView.trigger('')).
    }
});

我想知道这是否比 100+ DOM 侦听器方法更好...您只有一个 DOM 侦听器,但 RecordView 中有 100 个侦听器等待收到事件通知。DOM 事件侦听器是否比 Backbone 事件侦听器“重”?您可以完全删除侦听器并让 CollectionView 直接触发一个方法,从而将侦听器减少到一个,但这会将视图紧密耦合。如果这两个视图在功能上如此接近并且几乎交织在一起,那么这种紧密耦合是否重要?

处理这种情况的正确方法是什么?

4

1 回答 1

1

恕我直言,我认为没有正确的方法。您概述工作的两种方法。但是,在处理大量视图时,从内存角度来看,利用 DOM 冒泡的委托方法将是最佳的。在这种方法中,我可能倾向于将记录视图的 id 作为数据属性存储在记录视图 DOM 中,并在集合视图中存储针对该 id 的视图映射。然后直接调用方法即可。不用担心它是紧密耦合的。

于 2013-11-14T08:27:13.157 回答