Arrays in a Backbone.js Model are essentially stat

Question

Why are arrays in a Backbone.js Model essentially static variables?

class exports.Content extends Backbone.Model
    tags: []

then if i make a few models:

contentA = new Content()
contentB = new Content()

and add one string to each models' array:

contentA.tags.push('hello')
contentB.tags.push('world')

they both end up with the same array:

contentB.tags // ['hello','world']

but if it's a string, then there is no problem:

contentA.name = "c1"
contentB.name = "c2"

contentA.name // "c1"

Answer 1

"tags" is being declared on the Content.prototype - which is shared across all instances of Content. You probably need to use defaults instead: http://backbonejs.org/#Model-defaults. However, it should be noted that you must use a function (instead of a hash) when defining defaults, otherwise you still run into the same problem when using types which are passed by reference (e.g. Array).

var Content = Backbone.Model.extend({
  defaults: function() { 
    return {
      tags: []
    };
  }
});

Answer 2

As Derick Bailey mentioned, pass by reference is the problem. I solved the problem by cloning the Array (passing-by-value essentially):

var _events = window.active_model.get('events').slice(0);
_events.push({ key: "xxx", value: "yyy" });
window.active_field.set('events', _events);

Answer 3

benpickles is correct when it comes to Backbone models, and the way to do this in coffeescript in general is to initialize instance properties in the constructor:

class Foo
  constructor: ->
    @bar = []

Answer 4

The short answer

When you call extends to define your object, you are passing the new object's configuration in as an object literal. Objects are passed by reference, and the extends function only passes a reference to the tags array in to the new type definition.

As noted by others, you can correct this by assigning tags to a function. This works because a function delays the evaluation of the tags until the object is instantiated. There's nothing native in JavaScript that does this, but it's Backbone itself that recognizes tags as a function or a value.

The long answer

In spite of your code being in CoffeeScript, this comes down to a combination of a few things in JavaScript:

• There are no classes in JavaScript
• Object literals are evaluated immediately
• JavaScript objects are passed around by reference

In JavaScript, there are no classes. Period. CoffeeScript gives you the notion of a class, but in reality, it gets compiled down to JavaScript which has no classes.

You can have types and type definitions (constructor functions) but not classes. Backbone provides a class-like definition, that looks similar to Java's "extend" class-based inheritance. It's still just JavaScript, though, which has no classes.

What we have, instead, is an object literal being passed in to the extends method. It's as if you write this code:

var config = { tags: [] }

var MyModel = Backbone.Model.extends(config);

In this code, config is an object literal, or a hash, or a key/value pair, or an associative array. Whatever name you call it, it's the same basic idea. You end up with a config object that has a tags attribute. The value of config.tags is an empty array, [], which is itself an object.

Which brings us back to the short answer:

When you call extends to define your object, you are passing the new object's configuration in as an object literal. Objects are passed by reference, and the extends function only passes a reference to the tags array in to the new type definition.

As noted by others, you can correct this by assigning tags to a function. This works because a function delays the evaluation of the tags until the object is instantiated. There's nothing native in JavaScript that does this, but it's Backbone itself that recognizes tags as a function or a value.