Question

The following are some of my coffeescript code

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})

The following three lines are not fire the change event calling renderArray
method

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

but the following code actually call the renderArray method

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

is there any method to detect property changed of an object in an array?

or what I have done wrong?

Answer 1

You can think about it this way: “array” is a variable name that points to an array. When you do this:

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

You are pointing “array” to a completely different array. However, when you do this:

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

You are updating the array that “array” already points to. In other words, you are not changing the array that “array” points to. Instead, you are modifying a value within the existing array.

This Q&A has more backround: Backbone.js : change not firing on model.change()

And points out this work around:

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