javascript - 数组内对象的属性更改时如何将更改事件与视图绑定？

Question

以下是我的一些咖啡脚本代码

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方法的change事件

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”指向的数组。相反，您正在修改现有数组中的值。

这个问答有更多的背景：Backbone.js : change not fire on model.change()

并指出这项工作：

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