title: Learning Ember.js- Persistence In Many To Many Relationships
body: <p>To learn Ember.js I started writing a small bookmark application. I'm struggling with issues related to wrong data handling now.</p>
  
  <p><strong>To Explain The Application</strong></p>
  
  <ul>
  <li>User can add label</li>
  <li>User can add links to selected labels</li>
  <li>A Label can have n links</li>
  <li>A Link can have n labels</li>
  <li>Show links by selecting the associated labels</li>
  </ul>
  
  <p><strong>The Issue</strong><br>
  Link data is not writtern to the data store. Because of this, local updates to the links model due selection changes are overwritten. Also, implementing true persistence later wouldn't work.</p>
  
  <p><strong>Narrowing down the issue</strong></p>
  
  <p>In IndexRoute I initialize the model:</p>
  
  <pre><code>model: function(params) {
      return {
          labels: this.get("store").find("label"),
          // TODO: this is probably wrong.
          links: Ember.A()
      };
  }
  </code></pre>
  
  <p>On the one side I fetch label data from the data store. On the other side I initialize link data with an empty ember array.</p>
  
  <p>In my opinion this is the root of the malfunction but I don't know how to implement this properly.
  I tried to replace this with bogus references to the storage adapter: </p>
  
  <p><code>this.get("store").find("label").filter("_")</code></p>
  
  <p>This is neither right nor does it work properly. Then it continues to the point where I then can't use the storage adapter to update records:</p>
  
  <pre><code>// TODO: this is probably wrong.
  this.get("links").addObject({
      name: linkName,
      url: linkUrl,
      labels: this.selectedLabels
  });
  /*store.push("link", {
      name: newLink,
      url: linkUrl,
      labels: this.selectedLabels
  });*/
  </code></pre>
  
  <p>And so on.</p>
  
  <p>Jsbin: <a href="http://jsbin.com/ucanam/1751/edit" rel="nofollow">http://jsbin.com/ucanam/1751/edit</a></p>
  
  <p>How to store link data properly so changing the local data of the controler won't break the application?</p>
  
  <p><strong>Edit:</strong><br>
  I think I found my conceptual mistake with your advice. Does that mean that I always have to handle the local copy aswell?</p>
  
  <pre><code>var link = this.get("model");
  link.deleteRecord();
  link.save().then(function(link) {
      var indexController = this.get('controllers.index');
      indexController.get("links").removeObject(link);
  });
  </code></pre>
  
  <p>In your example you used a promise to add the object to the controller. In this code sample the promise will never fulfill- therefore it only works without.</p>
  
  <p>Also in the <code>LabelController</code> the remove method should also deletes associated links. If I use <code>deleteRecord</code> in the forEach loop it only deletes one label and then it somehow brings the loop to exit. Is this intentionally or have I made a mistake?</p>
  
  <p>I have updated your JsBin.<br>
  <a href="http://jsbin.com/ucanam/1987/edit" rel="nofollow">http://jsbin.com/ucanam/1987/edit</a></p>