如何根据从另一个下拉列表中选择来筛选下拉结果？

我想按州和/或县过滤项目。我能够做到这一点，但我想添加的是，只显示与所选状态有关的德县的功能，如果没有选择状态，则显示所有可用的县。我非常确定我必须使用可观测值，但不能想到这样做（开始了解可观测值）。如果在不使用可观察属性的情况下有更好的方法实现这一点，请解释如何。如何根据从另一个下拉列表中选择来筛选下拉结果？

实施例：

如果选择佛罗里达，则仅县迈阿密和奥兰多应该在县下拉。

这是我的时刻：

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

JSBin

谢谢！

来源

2015-02-10 FutoRicky

你能提供基于数据所期望的行为的例子吗？例如“选择__时，_____应该发生” – wolfemm 2015-02-10 22:50:27

我很抱歉，我通过提供国家和州来使用不正确的示例。它应该是States和Countys。我想要的是当选择佛罗里达州时，可供选择的县应该是迈阿密，奥兰多，李县等......现在就去编辑它。 – FutoRicky 2015-02-11 00:58:45

你需要创建一个州到县的映射（告诉它哪个县的映射到哪个州）。然后，您可以使用该映射来过滤您为县下拉菜单显示的县。

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

UPDATE

如果你不希望添加映射另一个属性，你可以做到以下几点：

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

来源

2015-02-11 03:49:21 Kalman

我想在不添加属性的情况下实现此目的。它将如何使用既定的属性和值？ – FutoRicky 2015-02-11 19:23:13

恩，Ember应该知道哪些州属于哪个州？ :) – Kalman 2015-02-11 19:34:44

就像验证每个具有选定状态的项目一样，只需添加该县。这可能吗？ – FutoRicky 2015-02-11 19:38:59

如何根据从另一个下拉列表中选择来筛选下拉结果？

回答

相关问题