javascript - 当数组内对象的属性发生变化时，如何将更改事件与 View 绑定(bind)？

Question

以下是我的一些coffeescript代码

class Floor extends Backbone.Model
    defaults:
        "array":[]

    initialize: ->
        a = []
        for i in [0..10] by 1
            tmp = {
                x: i*10,
                y: i*10
            }
            a.push(tmp)
        this.set('array', a)

class FloorView extends Backbone.View
    initialize: ->
        this.model.on('change:array', this.renderArray, this) 

    renderArray: ->
        console.log 'Do something'
        return this

floor1 = new Floor
floorView = new floorView({ model:floor1})

以下三行不会触发调用 renderArray 的更改事件 方法

array = floor1.get('array')
array[0].x = 1000;
floor1.set('array',array)

但是下面的代码实际上调用了renderArray方法

floor1.set('array',{});

是否有任何方法可以检测数组中对象的属性更改？

或者我做错了什么？

Answer 1

你可以这样想:“array”是一个指向数组的变量名。当您这样做时:

floor1.set('array', []);

您将“数组”指向一个完全不同的数组。但是，当您这样做时:

array = floor1.get('array')
array[0].x = 1000;
floor1.set('array', array)

您正在更新“array”已经指向的数组。换句话说，您没有更改“array”指向的数组。相反，您正在修改现有数组中的值。

此问答有更多背景:Backbone.js : change not firing on model.change()

并指出了解决方法:

array = floor1.get('array')
array[0].x = 1000;
floor1.set('array', array)
floor1.trigger('change:array')