[英]Ember.js checkbox for array controller computed property
我有一个复选框,希望触发一个简单的“全选”功能。 问题是我无法弄清楚如何将复选框的动作连接到控制器中的动作,以便实际上可以更新记录。
App.LanguagesController = Ember.ArrayController.extend({
actions: {
toggleAllVisibility: function() {
var newVisibility = !this.get('allAreVisible');
var needingVisibilityChange = this.filterBy('visible', !newVisibility);
needingVisibilityChange.setEach('visible', newVisibility);
}
},
allAreVisible: function(param) {
return this.filterBy('visible', false).get('length') === 0;
}.property('@each.visible'),
});
在我的模板中,我有以下输入助手
{{input type='checkbox' checked=allAreVisible}}
当我手动更改元素时(即,如果所有元素都被选中,然后更新复选框),这将正确更新复选框,但是当我切换复选框时,不会触发任何操作。
看起来在Ember.js的旧版本中,我可以简单地向输入帮助器添加一个动作参数,但这不再起作用。 我假设我需要设置一些内容,以在计算属性尝试更改时进行观察,但是我在文档或其他帮助中找不到任何内容。
我还尝试扩展复选框以发送click事件:
App.AllLanguagesCheckbox = Ember.Checkbox.extend(Ember.ViewTargetActionSupport, {
click: function() {
this.triggerAction({
action: 'toggleAllVisibility'
});
}
});
然后将其加载到我的模板中
{{view App.AllLanguagesCheckbox checkedBinding=allAreVisible}}
这允许复选框触发操作,但不会基于控制器中的计算属性进行更新。
我觉得这里缺少明显的东西。
编辑
根据以下kingpin2k的答案,这是工作控制器代码:
App.LanguagesController = Ember.ArrayController.extend({
toggleAllVisibility: function() {
var newVisibility = !this.get('controller').get('allAreVisible');
var needingVisibilityChange = this.get('controller').filterBy('visible', !newVisibility);
needingVisibilityChange.setEach('visible', newVisibility);
},
allAreVisible: function(param) {
return this.filterBy('visible', false).get('length') === 0;
}.property('@each.visible'),
});
它不是在正常范围内调用的,因此您必须显式地通过控制器来获取模型数组,但是它现在可以正常工作了。
这是随附的输入帮助器:
{{input type='checkbox' checked=allAreVisible change=toggleAllVisibility}}
问题是您的复选框已连接到已计算的属性,该计算应得出该值(也就是您不应该设置它),这是有人尝试检查时会发生的情况。
_allAreVisible:false,
allAreVisible: function(param) {
if(this.filterBy('visible', false).get('length') === 0){
// set to true;
// else set to false
}.observes('@each.visible'),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.