Ember.js：如何在选择助手上使用观察者来过滤内容？

Question

I'm trying to achieve the following with Ember-CLI:

After an initial list of items is loaded, the user can select a city from the dropdown to see only those items that are interesting to him/her. In my case that's districts in cities. You can select from a dropdown list a city to see only districts in that city.

Ideally, all should happen without calling an separately (on click).

So far, I've got this, but the console.log for 'filteredContent' returns an array of 0 elements. Any hints where I'm doing something wrong?

district/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}}

route:

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;

controller:

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')
});

model:

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

Answer 1

Finally figured it out:

Controller:

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')

And then, handlebars template needed some tweaking:

<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}}