Im trying to filter items in a table based on checked values but I am only able to filter one of the values at a time. What should I do to filter all the checked values?
This is the 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'
}
];
Here is the 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://ift.tt/1x2iORp">
<script src="http://ift.tt/1ryZ1pe"></script>
<script src="http://ift.tt/1HQ7eLT"></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>
Thanks in advance! Here is the jsBin Here
Aucun commentaire:
Enregistrer un commentaire