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

Question

我有一个应用程序,我有一个汽车视图,我有一个国家列表,每个国家都有一个复选框,当我检查一个国家,它显示一个视图下面有一个在该国家可用的部分列表.

检查更多国家/地区会在页面下方的更多国

这些部件都存储在一个地方,但需要通过coutry字段进行过滤,以便在该部分中显示该国家/地区的部件.

我可以创建国家/地区列表,如果选中它会显示下面的国家/地区部分,其中包含部件列表,但如何过滤以仅显示该国家/地区.我是否需要为每个国家和控制器创建视图以显示每个国家/地区的部分？

当然有更好的方法.

编辑:

这就是我需要显示页面的方式:

Coutries : UK <- selected

           USA

           China <- selected


Parts available in UK:

....

Parts available in China

....

所以我需要显示每个选定国家/地区的单独列表.

请帮助瑞克

Answer 1

使用嵌套视图可能最好解决这个问题.你可以在这里看到我的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})
    ]);
});
?