StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POManipulating model property on click
text
Body
copied!<p>I just recently started learning Ember (so far with a lot of trouble). I'm trying to display a list of feeds. When a feed is clicked I want to append an 'x' to its title. This should update immediately in the list.</p> <p>This is what I've got (ember 1.0 pre).</p> <pre><code>var App = Em.Application.create(); App.set('Feed', Em.Object.extend({ title: null, url: null, style: 'default', entries: [] })); App.set('FeedItemView', Em.View.extend({ tagName: 'li', click: function (event) { var feed = this.get('feed'); feed.set('title', feed.get('title') + 'x'); console.log(feed); } })); App.set('feedsController', Em.ArrayController.create({ content: [], init: function () { this._super(); // IMPORTANT this.pushObject(App.Feed.create({ title: 'DR - Alle nyheder 1', url: 'http://www.dr.dk/nyheder/service/feeds/allenyheder' })); this.pushObject(App.Feed.create({ title: 'DR - Alle nyheder 2', url: 'http://www.dr.dk/nyheder/service/feeds/allenyheder' })); this.pushObject(App.Feed.create({ title: 'DR - Alle nyheder 3', url: 'http://www.dr.dk/nyheder/service/feeds/allenyheder' })); } })); App.initialize(); </code></pre> <p>And the following in my HTML.</p> <pre><code><script type="text/x-handlebars"> <h1>Feeds</h1> <ul> {{#each App.feedsController}} {{#view App.FeedItemView feedBinding="this"}} {{title}} {{/view}} {{/each}} </ul> </script> </code></pre> <p>Clicking a feed properly adds the 'x' to the title, but I the first click gives this error:</p> <pre><code>Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. </code></pre> <p>Clicking multiple times then yields this error:</p> <pre><code>Something you did caused a view to re-render after it rendered but before it was inserted into the DOM. Because this is avoidable and the cause of significant performance issues in applications, this behavior is deprecated. If you want to use the debugger to find out what caused this, you can set ENV.RAISE_ON_DEPRECATION to true. </code></pre> <p>I carefully looked up both of these, but haven't been able to figure anything out. None of the examples that usually yields these errors look like my code. I also tried setting ENV.RAISE_ON_DEPRECATION in various ways, but the error message still shows.</p> <p>Any help would be appreciated. Thanks! :-)</p> <p><strong>SOLUTION:</strong> </p> <p>Apparently, this is what is needed to make the example work.</p> <pre><code>App.ApplicationController = Em.Controller.extend(); App.ApplicationView = Em.View.extend({ templateName: 'application' }); App.Router = Em.Router.extend({ root: Em.Route.extend() }); App.initialize(); </code></pre> <p>And the template should definition should have a name.</p> <pre><code><script type="text/x-handlebars" data-template-name="application"> </code></pre> <p>See <a href="https://github.com/emberjs/ember.js/issues/1309" rel="nofollow">this issue on Github</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