StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLearning Ember.js- Persistence In Many To Many Relationships
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload