gpt4 book ai didi

javascript - 如何使用 ember 中所有已检查的变量来过滤表中的项目?

转载 作者:行者123 更新时间:2023-12-03 10:56:45 25 4
gpt4 key购买 nike

我正在尝试根据检查的值过滤表中的项目,但我一次只能过滤其中一个值。我应该怎么做才能过滤所有检查的值?

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

最佳答案

这是一种根据匹配多个值的属性进行过滤的方法。我添加了一个会计部门以获得更多多样性。

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

关于javascript - 如何使用 ember 中所有已检查的变量来过滤表中的项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28242894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com