控制器属性更改时模板不更新答案

【问题标题】：Template not updating when controller property changes控制器属性更改时模板不更新
【发布时间】：2013-12-08 12:53:39
【问题描述】：

警告：这是我的第一个 ember 应用程序的一部分。

我在控制器上有一个Ember.MutableArray。相应的视图有一个观察者，它会在数组更改时尝试重新渲染模板。阵列上的所有更改（通过用户交互）都可以正常工作。模板永远不会更新。我做错了什么？

我正在使用 Ember 1.2.0 和 Ember Data 1.0.0-beta.4+canary.7af6fcb0，尽管我猜后者对此不重要。

代码如下：

var ApplicationRoute = Ember.Route.extend({
  renderTemplate: function() {
    this._super();
    var topicsController = this.controllerFor('topics');
    var topicFilterController = this.controllerFor('topic_filter');
    this.render('topics', {outlet: 'topics', controller: topicsController, into: 'application'});
    this.render('topic_filter', {outlet: 'topic_filter', controller: topicFilterController, into: 'application'});
  },
});

module.exports = ApplicationRoute;


var TopicFilterController = Ember.Controller.extend({
  topicFilters: Ember.A([ ]),
  areTopicFilters: function() {
    console.log('topicFilters.length -> ' + this.topicFilters.length);
    return this.topicFilters.length > 0;
  }.property('topicFilters'),
  getTopicFilters: function() {
    console.log('getTopicFilters....');
    return this.store.findByIds('topic', this.topicFilters);
  }.property('topicFilters'),
  actions: {
    addTopicFilter: function(t) {
      if(this.topicFilters.indexOf(parseInt(t)) == -1) {
        this.topicFilters.pushObject(parseInt(t));
      }
      // this.topicFilters.add(parseInt(t));
      console.log('topicFilters -> ' + JSON.stringify(this.topicFilters));
    },
    removeTopicFilter: function(t) {
      this.topicFilters.removeObject(parseInt(t));
      console.log('topicFilters -> ' + JSON.stringify(this.topicFilters));
    }
  }
});

module.exports = TopicFilterController;


var TopicFilterView = Ember.View.extend({
  topicFiltersObserver: function() {
    console.log('from view.... topicFilters has changed');
    this.rerender();
  }.observes('this.controller.topicFilters.[]')
});

module.exports = TopicFilterView;


// topic_filter.hbs
{{#if areTopicFilters}}
  <strong>Topic filters:</strong>
  {{#each getTopicFilters}}
    <a {{bind-attr href='#'}} {{action 'removeTopicFilter' id}}>{{topic}}</a>
  {{/each}}
{{/if}}


var TopicsController = Ember.ArrayController.extend({
  needs: ['topicFilter'],
  all_topics: function() {
    return this.store.find('topic');
  }.property('model', 'App.Topic.@each'),
  actions: {
    addTopicFilter: function(t) {
      App.__container__.lookup('controller:topicFilter').send('addTopicFilter', t);
    }
  }
});

module.exports = TopicsController;


// topics.hbs
<ul class="list-group list-unstyled">
  {{#each all_topics}}
    <li class="clear list-group-item">
      <span class="badge">{{entryCount}}</span>
      <a {{bind-attr href="#"}} {{action 'addTopicFilter' id}}>{{topic}}</a>
    </li>
  {{/each}}
</ul>

【问题讨论】：

标签： ember.js

【解决方案1】：

你的观察应该只是controller.topicFilters.[]

老实说，这是一种非常低效的方法，重新渲染整个视图，因为数组上的单个项目发生了变化。如果您展示您的模板，我可以为您提供更好的处理方式。

这是一个示例，我已经更改了很多内容，并且猜测了其他一些内容，因为我不知道您的应用到底如何。

http://emberjs.jsbin.com/uFIMekOJ/1/edit

【讨论】：

不幸的是，在 TopicFilterView 中更改 topicFiltersObserver 上的观察并没有任何区别。我在上面代码的末尾添加了我的模板。这是我的第一个 Ember 应用程序，其中大部分是我的反复试验。提前感谢您的帮助。
是否还要添加主题过滤器模板
在 TopicsController 上方。
我会设置一个jsbin，设置夹具数据需要一些时间。
太棒了。我今天一直在玩它，但无济于事。再次感谢。