我想按州和/或县过滤项目。我能够完成此任务，但我想添加的是仅显示与所选州相关的县的功能，如果未选择州，则显示所有可用的县。我很确定我必须使用可观察量，但想不出这样做的方法(开始学习可观察量)。如果有更好的方法在不使用可观察属性的情况下实现此目的，请解释如何实现。
示例:
如果选择佛罗里达州，则只有迈阿密和奥兰多县应出现在县下拉列表中。
这就是我现在所拥有的:
JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.A(
[
Ember.Object.create({ name: "John", county: "Miami", state: "Florida" }),
Ember.Object.create({ name: "Sam", county: "Orlando", state: "Florida" }),
Ember.Object.create({ name: "Tim", county: "Los Angeles", state: "California" }),
Ember.Object.create({ name: "Liam", county: "San Francisco", state: "California" })
]);
}
});
App.IndexController = Ember.ArrayController.extend({
counties: function(){
return this.get('model').getEach('county').uniq();
}.property(),
states: function(){
return this.get('model').getEach('state').uniq();
}.property(),
filtered: function(){
var country = this.get('country');
var state = this.get('state');
var model = this.get('model');
if(country ){
model = model.filterBy('country', country);
}
if(state){
model = model.filterBy('state', state);
}
return model;
}.property('country', 'state')
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h1>Non Filtered</h1>
<ul>
{{#each person in model}}
<li>{{person.name}}({{person.county}}, {{person.state}})
</li>
{{/each}}
</ul>
<h1>Filtered</h1>
Counties: {{view "select" content=counties value=county prompt="Pick one..."}}
States: {{view "select" prompt="Pick one..." content=states value=state}}
<ul>
{{#each person in filtered}}
<li>{{person.name}}({{person.county}}, {{person.state}})
</li>
{{/each}}
</ul>
</script>
</body>
</html>
提前致谢!
最佳答案
您将需要创建一个州到县的映射(以告诉它哪个县映射到哪个州)。然后，您可以使用映射来筛选在县下拉列表中显示的县。
stateToCountyMapping: [
Ember.Object.create({ state: 'Florida',
counties: ['Miami', 'Orlando']}),
Ember.Object.create({ state: 'California',
counties: ['Los Angeles', 'San Francisco']})
],
counties: function(){
var counties = this.get('model').getEach('county').uniq();
var state = this.get('state');
if(state){
var mapping = this.get('stateToCountyMapping').findBy('state', state);
counties = counties.filter(function(county){
return mapping.get('counties').contains(county);
})
}
return counties;
}.property('state')
工作演示 here
更新
如果您不想添加其他属性进行映射，可以执行以下操作:
counties: function(){
var counties = this.get('model').getEach('county').uniq();
var state = this.get('state');
if(state){
counties = this.get('model').filter(function(record){
return record.get('state') === state;
}).mapBy('county').uniq();
}
return counties;
}.property('model', 'state'),
基本上，根据所选州过滤模型中的每条记录，然后仅获取县，然后确保它们是唯一的。
工作演示 here
关于javascript - 如何根据另一个下拉列表中的选择来过滤下拉列表结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28441193/