Alex Rivera | Logout

Backbone.js Handling of Attributes That Are Arrays

Asked 2011-06-22T01:06:34.020
35

I really like Backbone, but I am having the hardest time doing what would seem to be simple things. I appreciate any help with the following example.

I have a model, Criteria, that I want to use to store the state of some items in my UI. there are a couple simple attributes, and one attribute that is an array of IDs used to store the IDs of tags the user has selected in the UI.

So, I create a new instance. I add some items to the tags array. Then, I want to start fresh, create a new instance, assigned to the same variable. But, my tags array continues to hold information I added to it as a part of the first instance of Criteria.

I have documented the test case below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <script src="Scripts/Libraries/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="Scripts/Libraries/underscore.js" type="text/javascript"></script>
    <script src="Scripts/Libraries/backbone.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        $(function () {

            // Simple model to hold some state about my UI.
            var Criteria = Backbone.Model.extend({

                defaults: {
                    "status": "Normal",
                    "priority": "Normal",
                    "tags": new Array()
                }

            });

            // Create new criteria.
            window.criteria = new Criteria();

            // The length of the tags array should be 0. PASSES
            console.log("Expect 0: Actual " + window.criteria.get("tags").length);

            // Add a tag id to the tags array.
            window.criteria.get("tags").push(5); // Tag with ID of 5.

            // The length of th
javascript backbone.js
Edit
Report

1 Answer

13

When you define 'tags' under 'defaults', you create a new Array and set that to the default value for that class. Then, when you create a new instance, it has the same Array reference, which still has the things you pushed into it.

Rather than setting a default value for tags, you should be able to just set it to [] before you use it the first time:

window.criteria = new Criteria()
window.criteria.set({'tags', []})  //you can use new Array() if you want
window.criteria.get('tags').push(5)

window.criteria = new Criteria()
console.log(window.criteria.get('tags'))   //should be undefined
window.criteria.set({'tags', []})
answered 2011-06-22T02:45:57.897

Your Answer