Ember.js数组控制器计算属性的复选框

Ember.js checkbox for array controller computed property

本文关键字：属性 复选框 计算 控制器 js 数组 Ember      更新时间：2023-09-26

我有一个复选框，我想触发一个简单的"全选"功能。问题是我无法弄清楚如何将复选框的操作连接到控制器中的操作，以便我可以实际更新记录。

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我可以简单地向输入帮助程序添加一个操作参数，但这不再有效。我假设我需要设置一些东西来观察计算属性何时尝试更改，但我在文档或其他帮助中找不到任何内容。

我还尝试扩展复选框以发送点击事件：

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'),

http://emberjs.jsbin.com/abODIKoj/1/edit

相关文章：