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 に答える