Шаблон не обновляется при изменении свойств контроллера

Question

Предостережение. Это часть моего первого приложения для 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> 

Answer 1

ваш наблюдает должно быть просто controller.topicFilters.[]

И честно это очень неэффективный способ сделать это, перерисовка весь ваш взгляд, так как один элемент, измененный в массиве , Если вы покажете свой шаблон, я могу дать вам гораздо лучший способ справиться с этим.

Вот пример, я изменил немало вещей и догадался о некоторых других, так как я не знаю точно, как ваше приложение.

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