Question

我刚刚开始学习Ember（到目前为止遇到很多麻烦）。我正在尝试显示供稿列表。点击Feed时，我想在其标题上附加一个“x”。这应该立即在列表中更新。

这就是我所拥有的（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();

以下是我的HTML。

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

正确点击Feed会在标题中添加“x”，但我第一次点击就会出现此错误：

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

多次单击会产生此错误：

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.

我小心翼翼地抬起了这两个，但一直没能弄明白。通常产生这些错误的示例都不像我的代码。我也试过以各种方式设置ENV.RAISE_ON_DEPRECATION，但错误信息仍然显示。

任何帮助将不胜感激。谢谢！： - ）

解决方案：

显然，这是使示例工作所需的。

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

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

App.initialize();

模板定义应该有一个名称。

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

请参阅this issue on Github。

Answer 1

显然，这是使示例工作所需的。

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

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

App.initialize();

模板定义应该有一个名称。

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

请参阅this issue on Github。

单击操作模型属性

1 个答案: