title: low coupling: add a model to a collection of a different view
body: <p>i'm building a Backbone/Marionette application to list different sets of cards. the layout has an ItemView on the left side including an input field to add a new set and a CompositeView on the right side to list the card sets.</p>
  <pre><code>Cards.module(&quot;Set.SideBar&quot;, function(SideBar, App) {
      SideBar.SideBarView = Backbone.Marionette.ItemView.extend({
          template: &quot;#set-sideBar&quot;,
          className: &quot;well sidebar-nav&quot;,
          ui: {
              saveBtn: &quot;a.saveSet&quot;,
              setName: &quot;input[type=text]&quot;
          },
          events: {
              &quot;click .saveSet&quot;: &quot;saveSet&quot;
          },
          saveSet: function(ev) {
              ev.preventDefault();
  
              var newSetName = this.ui.setName.val().trim();
              var newSet = new Cards.Entities.Set({ name: newSetName });
  
              newSet.save();
  
              // How to add the model to the collection?
          }
      });
  });
  </code></pre>
  <p>i'm looking for the best way to add the <strong>newSet</strong> to the collection of the CompositeView below. is there any clean low coupling solution to deal with that? i'm quite new to backbone.js and can't imagine that this is something totally unordinary, but somehow i'm not able to find an answer to my question in the regarding docs - or just dont understand them.</p>
  <pre><code>Cards.module('Set.List', function(List, App) {
      List.SetItemView = Backbone.Marionette.ItemView.extend({
          tagName: &quot;tr&quot;,
          template: &quot;#set-list-item&quot;
      });
  
  List.SetView = Backbone.Marionette.CompositeView.extend({
          tagName: &quot;table&quot;,
          className: &quot;table table-bordered table-striped table-hover&quot;,
          template: &quot;#set-list&quot;,
          itemView: List.SetItemView,
          itemViewContainer: &quot;tbody&quot;,
          modelEvents: {
              &quot;change&quot;: &quot;modelChanged&quot;
          },
  
          initialize: function() {
              this.collection.fetch();
          }
      });
  });
  </code></pre>
  <p>thanks in advance for your help!</p>
  <h1><strong>how i'm doing it now:</strong></h1>
  <p>thanks for both answers, they were guiding me in the right direction. the collection.create hint was also very useful and solved another problem i was facing!</p>
  <p>inside a Marionette.Controller i do something like this and simply share the collection reference:</p>
  <pre><code>var setLayout = new Cards.Set.Layout();
  Cards.mainRegion.show(setLayout);
  
  var sets = new Cards.Entities.SetCollection();
  var listView = new Cards.Set.List.SetView({ collection: sets });
  setLayout.listRegion.show(listView);
  
  var sideBarView = new Cards.Set.SideBar.SideBarView({ collection: sets });
  setLayout.sideBarRegion.show(sideBarView);
  </code></pre>
  <p>and the new model is simply added by collection.create instead of .save() and .add().</p>