backbone.js set model array property

Question

I have a backbone.js model with an array as a property:

defaults: {
    myArray : [0,1,2]
}

I'm trying to set the value for a particular index.

var myIndex = 1;
myModel.set({"myArray"[myIndex] : newVal}); //doesn't work
myModel.set({"myArray[myIndex]": newVal}); //doesn't work
myModel.set({"myArray" + "[" + myIndex + "]": newVal}); //doesn't work

What's the proper syntax to get/set array properties? Thanks.

Solution 1

the syntax you're trying doesn't work because the parameters sent into the set method are an object literal. the values on the left side of the : are treated as literal names, while the values on the right can be executed / interpreted code.

there's a few things you can do, though:

get, update, and set the entire array:

var a = myModel.get("myArray");
a[0] = 5
myModel.set("myArray", a);

myModel.get("myArray"); //=> [5, 1, 2]

the advantage in doing it this way is that you get the standard "change" events fired from the model because you are setting the value of the attribute on the model.

another way to do it would be to shortcut the process by using a get, and updating the array directly:

myModel.get("myArray")[0] = 5
myModel.trigger("change");
myModel.trigger("change:myArray");

myModel.get("myArray"); //=> [5, 1, 2]

the disadvantage here is that this won't fire the "change" events because you're not calling the set method. so, if you need those events, you have to fire them yourself, as i've shown.

Solution 2

Derick's answer is mostly correct aside from one thing. Getting and then setting an array property will not generate the change events on the model.

The get call gives you a reference to the array in the "myArray" property, which you then modify. Because you have a reference to an object, you're directly modifying the same array as on your model. When you then call "set," the object you're passing is exactly equal to the array for that property (because they are both references to the same object), and no change is detected because there is no change in the set operation.

To trigger a change event, you either still have to call it manually (as in Derick's second example), or create a clone of the array and use that in your setter (since it is now a completely different object).

Comments

[fortuneRice]

For anyone looking at this, please also see my other question and the accepted answer to it that suggests extending Backbone.Model to support a setByName function.

[Perry Tew]

so that explains it. so obvious, yet I missed it.

[Tri Nguyen]

the first method might not trigger the correct change event, if the modification happens before the set action, set will not see the old and new value as different.

[Randy L]

so if i have an array as a property of an object, that object itself living inside of an array, i'll probably have to clone & set the top level array i guess? or just trigger('change') myself. probably taking the last option.