如何使用视图中的复选框过滤Ember.js中ArrayController的内容集合

Question

我正在使用Ember和EmberData的最新代码。我有rails作为我的后端，提供JSON，运行良好。我希望能够在我的视图中使用复选框来过滤Ember模型的"活动"属性。如果我选中复选框，我希望复选框只显示活动的数据=true。我不想从数组中删除数据，只想隐藏数据。这是我目前所拥有的，但它不起作用。

型号：

App.Org = DS.Model.extend({
code: DS.attr('string', { defaultValue: 'N/A' }),
name: DS.attr('string', { defaultValue: 'N/A' }),
source: DS.attr('string', { defaultValue: 'N/A' }),
status: DS.attr('string', { defaultValue: 'N/A' }),
type: DS.attr('string', { defaultValue: 'N/A' }),
note: DS.attr('string', { defaultValue: 'N/A' }),
financial_Flag: DS.attr('string', { defaultValue: 'N/A' }),
expense_Flag: DS.attr('string', { defaultValue: 'N/A' }),
revenue_Flag: DS.attr('string', { defaultValue: 'N/A' }),
created_At: DS.attr('string', { defaultValue: 'N/A' }),
updated_At: DS.attr('string', { defaultValue: 'N/A' }),
active: function() {
var status = this.get('status');
var active = (status === 0) ? false : true;
console.log("status: " + status + " | active: " + active);
return active;
}.property('status')
}).reopenClass({
collectionUrl: '/orgs',
resourceUrl: '/orgs/%@',
resourceName: 'org'
});

阵列控制器：

App.OrgsController = Em.ArrayController.extend({
isEmpty: function() {
console.log("############ App.OrgsController.isEmpty called");
return this.get('length') === 0;
}.property('length'),
toggleActive: function(){
console.log("############ App.OrgsController.isActive called");
return this.filterProperty('active', value).forEach(this.removeObject, this);
}.property('@each.active'),
init: function() {
this.set('content', App.store.findAll(App.Org));
},
refreshOrgs: function() {
this.set('content', App.store.findAll(App.Org));
},
getInactiveOrgs: function(){
this.set('content', App.store.find(App.Org, {status: "0"}));
}
});

在我看来，我有：

<label>
isActive
{{view Ember.Checkbox checkedBinding="App.OrgsController.toggleActive" disabledBinding="App.OrgsController.isEmpty" }}
</label>

Answer 1

这可以通过创建一个计算属性来实现，该属性基于绑定到复选框的布尔值返回整个集合或仅返回项目的子集。例如，

App.Post = DS.Model.extend({
text: DS.attr('string'),
active: DS.attr('boolean')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Post.find();
}
});
App.IndexController = Ember.ArrayController.extend({
hideInactive: false,
filteredContent: function() {
var content = this.get('content');
if (!content || !this.get('hideInactive'))
return content;
return content.filter(function(item) {
return item.get('active');
});
}.property('content.isLoaded', 'hideInactive')
});

你的模板应该是这样的：

<script type="text/x-handlebars" data-template-name="index">
<p>{{view Ember.Checkbox checkedBinding="hideInactive"}} Hide Inactive Posts</p>
<br/>
{{#each filteredContent}}
<p>{{text}}</p>
{{/each}}
</script>

如果active被定义为计算属性，这也会起作用，如您的示例中所示。