title: backbone.js update one view based on events in another?
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;ul id='item-list'&gt;&lt;/ul&gt;
  &lt;button id='add-item'&gt;Add Item&lt;/button&gt;
  &lt;script type='text/template' id='item-template'&gt;
    &lt;li&gt;&lt;%= title %&gt;&lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and the following javascript / backbone js code:</p>
  
  <pre><code>var Item = Backbone.Model.extend({});
  var ItemCollection = Backbone.Collection.extend({
    model: Item
  });
  
  
  var ItemListView = Backbone.View.extend({
     el : $("#item-list"),
     initialize(options) {
       this.item_collection = new ItemCollection();
     }, 
     appendItem: function() {
       new_item = new Item({'title' : 'New Item'});
       this.item_collection.add(new_item);
       item_template = $("#item-template");
       item_html = _.template(item_template,new_item.toJSON());
       this.el.append(item_html);
     }
  });
  
  var AddItemView = Backbone.View.extend({
    el: $("add-item"),
    events: {
      "click" : "addItem"
    },
    addItem: function() {
      // ?
    }
  });
  
  item_list_view = new ListItemView();
  add_item_view = new AddItemView();
  </code></pre>
  
  <p>How can I add a new item to the item list view and collection from an event in the addItemView View? also, should the creation of the model, appending it to the collection, and appending it to the view all take place in the <code>ListItemView.addItem()</code> function, or should I instead have it binded to the add event of the ItemCollection ? I am still having some trouble wrapping my head around the way bindings and the interactions between various views, models, and collections should work. </p>