Question

我试图根据选中的值过滤表格中的项目，但我只能一次过滤其中一个值。我该怎么做才能过滤所有选中的值？

这是JavaScript：

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('employees', function(){});
});

App.EmployeesRoute = Ember.Route.extend({
  model: function(){
    return App.EMPLOYEES;
  }
});

App.EmployeesController = Ember.ArrayController.extend({

    inFinance: false, 
    inMarketing: false,

    filtered: function(){
      var inFinance = this.get('inFinance');
      var inMarketing = this.get('inMarketing');
          var model = this.get('model');
      var newModel = model;

      if(inFinance){
        newModel = model.filterBy('department', 'Finance');
      }
      if(inMarketing){
        newModel = model.filterBy('department', 'Marketing');
      }

        return newModel;
    }.property('inFinance', 'inMarketing')
});

App.EMPLOYEES=[
{
  name: 'Ricky',
  department: 'Finance'
},
{
  name:'George',
  department:'Marketing'
},
{
  name:'Jonah',
  department: 'Finance'
}
];

这是HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
    <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">
<nav class="navbar navbar-default navbar-fixed-top" sytle='padding:'>
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' tagName='a' classNames='navbar-brand'}}Test{{/link-to}}
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>{{#link-to 'employees' tagName='a'}}Employees{{/link-to}}</li></li>

      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



      <div class="container">
      {{outlet}}
      </div>

    <nav class="navbar navbar-default navbar-fixed-bottom" sytle='padding:'>
      Created by the almighty burrito. EmberJs Testing 2015
    </nav>
  </script>

  <script type="text/x-handlebars" data-template-name="index">

    <h1 style='padding:30px'>{{#link-to 'employees' tagName='a'}}Click for Employees{{/link-to}}</h3>

  </script>

  <script type="text/x-handlebars" data-template-name="employees">
    <h3 style='padding:15px'> Filter</h3>
    {{input type='checkbox' checked=inFinance}} Finance
    {{input type='checkbox' checked=inMarketing}} Marketing

    <h2 class="sub-header" >Employees</h2>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>name</th>
              <th>department</th>
            </tr>
          <tbody>
          {{#each employee in filtered}}
            <tr>
              <td>{{employee.name}}</td>
              <td>{{employee.department}}</td>
          {{/each}}

          </thead>
  </script>





</body>
</html>

提前致谢！这是jsBin Here

Answer 1

这是基于匹配多个值的属性进行过滤的一种方法。我增加了一个会计部门，以增加多样性。

var newModel = model;

var matchAgainst = [];

if(inFinance){
  matchAgainst.push('Finance');
}
if(inMarketing){
  matchAgainst.push('Marketing');
}
if(inAccounting){
  matchAgainst.push('Accounting');
}

if (!Ember.isEmpty(matchAgainst)) {
  newModel = newModel.filter(function(person) {
    return matchAgainst.indexOf(person.department) != -1;
  });
}

JS Bin example

如何使用ember中的所有已检查变量过滤表中的项目？

1 个答案: