我有一个应用程序，我有一个汽车 View ，我有一个国家/地区列表，每个国家/地区都有一个复选框，当我检查一个国家/地区时，它会在下面显示一个 View ，其中包含该国家/地区可用的零件列表。

勾选更多国家会在页面下方显示更多国家的零件。

零件都存储在一个地方，但需要按国家/地区字段过滤以仅显示该国家/地区的零件。

我可以创建国家列表，并在检查它时显示下面的一个国家部分，其中包含零件列表，但是我该如何过滤以仅显示该国家/地区。我是否需要为每个国家/地区创建 View 并为每个国家/地区的部分创建 Controller 以显示？？

肯定有更好的方法。

编辑:

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

Coutries : UK <- selected

           USA

           China <- selected


Parts available in UK:

....

Parts available in China

....

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

请帮忙 瑞克

最佳答案

这可能最好使用嵌套 View 来解决。可以看到my jsFiddle here .

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

Handlebars :

<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})
    ]);
});
​

关于javascript - ember.js 如何为 View 显示不同的过滤列表？复杂的设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9521595/