title: Backbone.js Handling of Attributes That Are Arrays
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I have documented the test case below.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script src="Scripts/Libraries/jquery-1.6.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/Libraries/underscore.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/Libraries/backbone.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
          $(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 the tags array should be 1. PASSES
              console.log("Expect 1: Actual " + window.criteria.get("tags").length);
  
              // Create a new instance of criteria.
              window.criteria = new Criteria();
  
              // The length of the tags array should be 0. FAILS
              // CONFUSED. I thought this is now a new instance with a new set of attributes.
              // Why does the tags collection still have an item in it.
              console.log("Expect 0: Actual " + window.criteria.get("tags").length);
  
              // OK. So, I will call the clear method on the model. This is supposed to remove all attributes
              // from the model.
              // Then, I will create it again.
              window.criteria.clear();
              window.criteria = new Criteria();
  
              // The length of the tags array should be 0. FAILS. Still 1.
              console.log("Expect 0: Actual " + window.criteria.get("tags").length);
  
              // ARGH!
              console.log("HELP!");
  
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;p&gt;Backbone test page.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Am I just way off the mark here? Am I trying to use Backbone for things it was not intended? Or am I missing something more general in javascript OO programming?</p>
  
  <p>P.S. I originally used a Backbone collection of tags, but that presented a whole different set of issues relating to having a Tag model referenced in multiple collections and how Backbone's remove method unsets the "collection" reference when an item is removed from any collection. Another day, another issue.</p>