如何在emberjs中使用复选框实现多个过滤器？ [英] How to implement multiple filters with checkboxes in emberjs?

问题描述

如何在emberjs中使用复选框实现多个过滤器？我想过滤一个网格表与具有某些属性在模板复选框中检查的项...

How do I implement multiple filters with checkboxes in emberjs? I would like to filter a grid table with the items that have certain properties that are checked in the template checkboxes...

例如，如果我有这个夹具： / p>

For example, if I have this fixture:

export default employees[
{
  name: 'Ricky',
  department: 'Finance',
  departmentIsChecked: false
},
{
  name:'George',
  department:'Marketing'
  departmentIsChecked:false
},
{
  name:'Jonah',
  department: 'Finance',
  departmentIsChecked:false
}
];

我如何只在表格上显示选中的部门员工？

how would I only display the checked department employees on the table?

这是我有的：

Ember.Controller.extend({
  filtered: function(){
    var departmentIsChecked = this.get('departmentIsChecked');

    var model = this.get('model');
    if (departmentIsChecked){
      model=model.filterBy('departmentIsChecked', true);
    }
    return model;
  }.property('departmentIsChecked')
});

范本：

{{#each employee in model}}
  {{input type='checkbox' checked=employee.departmentIsChecked}}{{employee.department}}
{{/each}}

jsbin： http://emberjs.jsbin.com/gaqavu/10/edit?html,css,js,output

推荐答案

如果您没有太多的部门，您可以创建与您的部门名称相对应的属性，然后过滤您的模型，如下所示：

If you don't have too many departments, you can create properties that correspond to your department names and then filter your model as follows:

App.EmployeesController = Ember.ArrayController.extend({

  inFinance: false, 
  inMarketing: false,
  // ...more departments...

  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');
    }
    // ... you will need to merge more depts here ...

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

您的模板将如下所示：

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

Partiall工作解决方案此处

Partiall working solution here

这篇关于如何在emberjs中使用复选框实现多个过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！