Ember.js: Как использовать наблюдателя в помощнике выбора для фильтрации содержимого?

Question

Я пытаюсь достичь следующего с Ember-CLI:

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

В идеале все должно происходить без вызова отдельно (по щелчку).

До сих пор у меня это есть, но console.log для 'filterContent' возвращает массив из 0 элементов. Любые подсказки, где я делаю что-то неправильно?

район/index.hbs:

<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" selection=selectedCity}}</p> 
{{#each item in filteredContent}} 
    <p>{{item.name}} in {{item.city.name}}</p> 
{{/each}} 

маршрут:

var DistrictListRoute = Ember.Route.extend({ 
    model: function() { 
     return this.store.find('district'); 
    }, 

    setupController: function(controller, model) { 
     this._super(controller, model); 
     this.store.find('city').then(function(cities) { 
      controller.set('cities', cities); 
     }); 
    } 
}); 

export default DistrictListRoute; 

контроллер:

export default Ember.Controller.extend({ 
    filteredContent: [], 
    selectedCity: null, 

    selectedCityChanged: function() { 
     var selectedCity = this.get('selectedCity'); 
     console.log(selectedCity); 
     var filteredContent = this.get('model').filterBy('city', selectedCity); 
     console.log(filteredContent); 
    }.observes('selectedCity') 
}); 

модель:

export default DS.Model.extend({ 
    city: DS.belongsTo('city', {async: true}), 
    name: DS.attr('string'), 
    advert: DS.hasMany('item') 
}); 

Answer 1

Наконец понял это:

Контроллер:

export default Ember.ArrayController.extend({ 
    selectedCity: null, 
    filteredContent: [], 

    selectedCityChanged: function() { 
     var selectedCity = this.get('selectedCity'); 
     var filteredContent = this.get('model').filterBy('city.id', selectedCity.id); 
     this.set('filteredContent', filteredContent); 
    }.observes('selectedCity') 

А потом, шаблон рули нужны некоторые настройки:

<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" selection=selectedCity}}</p> 
    {{#if filteredContent}} 
     <h2>District in {{selectedCity.name}}</h2> 
     {{#each district in filteredContent}} 
      <p>{{district.name}} in {{district.city.name}}</p> 
     {{/each}} 
     {{else}} 
     <h2>Districts</h2> 
     {{#each district in content}} 
      <p>{{district.name}} in {{district.city.name}}</p> 
     {{/each}} 
    {{/if}}