3

我最近才开始学习 Ember（到目前为止遇到了很多麻烦）。我正在尝试显示提要列表。单击提要时，我想在其标题上附加一个“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>

单击提要正确地将“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">

在 Github 上查看这个问题。

4

1 回答 1

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">

在 Github 上查看这个问题。

于 2012-08-25T11:25:18.053 回答