主干在模型被“设置”到集合中后触发事件

Backbone fire an event after models have been 'set' into a collection

本文关键字：集合 事件 模型 设置      更新时间：2023-09-26

我正在尝试在通过 set 方法将一批模型添加到集合后触发一个事件。我覆盖了 set 方法，调用了它的父 set 方法并在那里放了一个控制台.log它似乎正在触发每个试图添加到 colleciton 中的模型。

class MyCollection extends Backbone.Collection
    set: ->
        super
        console.log('set called')
我

无法确定为什么会发生这种情况，但为了继续前进，我决定使用下划线debounce方法将它们组合在一起，然后触发一个事件。这就是我想出的

class MyCollection extends Backbone.Collection
    initialize: ->
        @batchComplete = _.debounce(@_batchComplete, 1000)
        super
        @
    _batchComplete: =>
            if not window.test
                    window.test = @
            if window.test is @
                    console.log 'SAME AS PREVIOUS'
            else
                    console.log 'DIFFERENT', window.test, @
            window.test = @ 
            @trigger('setComplete')
    set: ->        
            super
            @batchComplete()
            @

我已经创建了这个集合的一个实例，并尝试使用 set 方法

c = new MyCollection
c.set([{...},{...},{...}])

我对此的期望是让window.test等于@但他们似乎指的是不同的位置。这是控制台中的示例输出

> DIFFERNT MyCollection, MyCollection
> DIFFERNT MyCollection, MyCollection

我不明白为什么window.test和@不一样.由于每次迭代都不相同，这意味着它没有调用相同的debounce方法

如果你真的在空集合上调用set，那么你可以改用reset：

重置collection.reset([models], [options])

一次

添加一个和删除一个模型都很好，但有时您需要更改的模型太多，以至于您宁愿批量更新集合。使用 reset 将集合替换为新的模型列表（或属性哈希），从而在末尾触发单个"reset"事件。

因此，您可以：

c = new MyCollection
c.on('reset', (collection) -> ...)
c.set([{...},{...},{...}])

最后你会得到一个'reset'事件。

演示：http://jsfiddle.net/ambiguous/EVxM7/

如果reset不合适，则可以使用_.after：

_.after(count, function)后

创建函数的一个版本，该版本仅在首次调用计数时间后运行。

所以你可以做这样的事情：

a = array_of_models
c = new Collection
c.on('add', _.after(a.length, (model, collection) -> ...)
c.set(a)

演示：http://jsfiddle.net/ambiguous/6SnSS/

您还可以覆盖set并触发自定义事件并侦听该自定义事件以了解set何时完成其工作：

class C extends Backbone.Collection
    set: ->
        super
        @trigger('batch-done', @)
c = new C
c.on('batch-done', (collection) ->
    console.log('All done', collection.toJSON())
)
c.set([ ... ])

演示：http://jsfiddle.net/ambiguous/YytvS/

相关文章：