如何在 emberjs 中使用复选框实现多个过滤器

How to implement multiple filters with checkboxes in emberjs?

本文关键字：实现 复选框 过滤器 emberjs      更新时间：2023-09-26

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

例如，如果我有这个夹具：

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

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

这是我所拥有的：

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

如果没有太多部门，则可以创建与部门名称对应的属性，然后按如下所示筛选模型：

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>

部分工作解决方案在这里

相关文章：