Question

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

我在控制器上有一个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>

Answer 1

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

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

这是一个例子，我已经改变了很多东西，并猜到了其他一些东西，因为我不确切知道你的应用是怎么回事。

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

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

1 个答案: