ember.js如何为视图显示不同的筛选列表?复杂的设置

这可能最好使用嵌套视图来解决。你可以在这里看到我的jsFiddle。

我不认为这是一个非常复杂的方法，但如果你对设计有任何问题，请告诉我。

把手：

<script type="text/x-handlebars">
    {{#each App.countriesController}}
        {{view Ember.Checkbox titleBinding="name" valueBinding="isChecked"}}
    {{/each}}
    <hr />
    {{#each App.countriesController}}
    {{#if isChecked}}
        {{view App.PartsByCountryView contentBinding="this" partsListBinding="App.partsController"}} <br />      
    {{/if}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="selected-country">
    Country: {{content.name}} <br />
    Parts:
    {{#each filteredParts}}
        {{name}}
    {{/each}}
</script>
​

应用程序代码：

window.App = App = Ember.Application.create();
/**************************
* Models
**************************/
App.Country = Ember.Object.extend({
    id: null,
    name: "",
    isChecked: null
});
App.Part = Ember.Object.extend({
    id: null,
    name: "",
    countryId: null
});
/**************************
* Views
**************************/
App.PartsByCountryView = Ember.View.extend({
    content: null,
    partsList: null,
    templateName: 'selected-country',
    filteredParts: function() {
        return this.get("partsList").filterProperty('countryId', this.getPath('content.id'))
    }.property('partsList.@each').cacheable() 
});
/**************************
* Controllers
**************************/
App.set('countriesController', Ember.ArrayController.create({
    content: Ember.A()
}));
App.set('partsController', Ember.ArrayController.create({
    content: Ember.A()
}));
/**************************
* App Logic
**************************/
$(function() {
    App.get('countriesController').pushObjects([
        App.Country.create({id: 1, name: "USA"}),
        App.Country.create({id: 2, name: "UK"}),
        App.Country.create({id: 3, name: "FR"})
    ]);
    App.get('partsController').pushObjects([
        App.Part.create({id: 1, name: "part1", countryId: 1}),
        App.Part.create({id: 2, name: "part2", countryId: 1}),
        App.Part.create({id: 3, name: "part3", countryId: 1}),
        App.Part.create({id: 4, name: "part4", countryId: 2}),
        App.Part.create({id: 5, name: "part5", countryId: 2}),
        App.Part.create({id: 6, name: "part6", countryId: 2}),
        App.Part.create({id: 7, name: "part7", countryId: 2}),
        App.Part.create({id: 8, name: "part8", countryId: 3}),
        App.Part.create({id: 9, name: "part9", countryId: 3}),
        App.Part.create({id: 10, name: "part10", countryId: 3}),
        App.Part.create({id: 11, name: "part11", countryId: 3})
    ]);
});
​

我会这样构建您的应用程序：

1. 仅包含零件对象列表的模型。每个对象都包含每个国家存在的该部分的数量
2. 一个控制器，用于根据所选国家/地区筛选该列表
3. 在控制器中设置所选国家/地区的视图
4. 显示控制器中包含选定零件的列表的视图

我在这里做到了：

http://jsfiddle.net/NPeeQ/2/

window.App = Ember.Application.create();
App.model = Ember.Object.create({
    parts: Ember.ArrayProxy.create({
        content: [
        {
            name: 'wheel',
            stock: {
                uk: 3,
                fi: 2,
                se: 0
            }
        },
        {
            name: 'windscreen',
            stock: {
                uk: 0,
                fi: 1,
                se: 3
            }
        }
    ]}),
    countries: ['uk', 'fi', 'se']
});
App.partController = Ember.Object.create({
    filterBy: {},
    setFilterBy: function (country, on) {
        var filterBy = $.extend({}, this.get('filterBy'));
        if (on) {
            filterBy[country] = true;
        } else {
            delete filterBy[country];
        }
        this.set('filterBy', filterBy);
    },
    // returns all available parts filtered by filterBy.
    availableParts: function () {
        var parts = App.model.parts;
        var filter = this.filterBy;
        var arr = [];
        App.model.countries.forEach(function(c) {
            if (!filter[c]) return;
            arr.push({heading:c});
            var tmp = App.model.parts.filter(function(p) {
                return p.stock[c] && p.stock[c] > 0;
            });
            arr = arr.concat(tmp);
        });            
        return arr;
    }.property('filterBy', 'App.model.parts').cacheable()
});
App.SelectorView = Ember.View.extend({
    templateName: 'selector',
    click: function(event) {
        if (event.target.tagName !== 'INPUT')
            return;
        var clicked = $(event.target).closest('label');
        var index = this.$().find('label').index(clicked);
        var country = App.model.countries[index];
        var on = event.target.checked;
        App.partController.setFilterBy(country, on);
    }
});
App.PartsView = Ember.View.extend({
    templateName: 'parts'
});

$(function() {
    App.selectorView = App.SelectorView.create();
    App.partsView = App.PartsView.create();
    App.selectorView.append();
    App.partsView.append();
})

车把：

<script type="text/x-handlebars" data-template-name="selector">
    {{#each App.model.countries}}
    <label><input type="checkbox"/> {{this}}</label>
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="parts">
    {{#each App.partController.availableParts}}
      {{#if heading}}
        <h2>{{heading}}</h2>
      {{else}}
    {{name}} <br/>
      {{/if}}
    {{/each}}
</script>

对于明细表，可以使用绑定到控制器上集合的#each帮助程序。控制器可以观察到绑定到当前所选国家的控制器。当选择发生更改时，它将更新集合，从而自动更新明细栏。