如何根据另一个下拉列表中的选择来过滤下拉列表结果？

Question

我想按州 and/or 县过滤项目。我能够做到这一点，但我想添加的是仅显示与所选州相关的县的功能，如果未选择任何州，则显示所有可用的县。我很确定我必须使用 observable 但想不出这样做的方法（开始了解 observables）。如果有更好的方法在不使用可观察属性的情况下实现这一点，请解释方法。

示例：

如果选择佛罗里达州，则只有迈阿密县和奥兰多县应出现在县下拉列表中。

这是我目前拥有的：

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

提前致谢！

Answer 1

您需要创建一个州到县的映射（告诉它哪个县映射到哪个州）。然后，您可以使用映射来过滤您在县下拉列表中显示的县。

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

如何根据另一个下拉列表中的选择来过滤下拉列表结果？

How to filter down dropdown results based on selection from another dropdown?

javascript

observable

ember.js

ember-cli