Question

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.

This is what I’ve got (ember 1.0 pre).

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();

And the following in my HTML.

<script type="text/x-handlebars">
  <h1>Feeds</h1>
  <ul>
    {{#each App.feedsController}}
      {{#view App.FeedItemView feedBinding="this"}}
        {{title}}
      {{/view}}
    {{/each}}
  </ul>
</script>

Clicking a feed properly adds the ‘x’ to the title, but I the first click gives this error:

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. 

Clicking multiple times then yields this error:

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.

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.

Any help would be appreciated. Thanks! 🙂

SOLUTION:

Apparently, this is what is needed to make the example work.

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
  templateName: 'application'
});

App.Router = Em.Router.extend({ 
  root: Em.Route.extend()
});

App.initialize();

And the template should definition should have a name.

<script type="text/x-handlebars" data-template-name="application">

See this issue on Github.

Answer 1

Apparently, this is what is needed to make the example work.

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
  templateName: 'application'
});

App.Router = Em.Router.extend({ 
  root: Em.Route.extend()
});

App.initialize();

And the template definition should have a name.

<script type="text/x-handlebars" data-template-name="application">

See this issue on Github.