Question

我有一个类似这样的复选框：

{{input type="checkbox" checked=property}}

当我单击复选框时，属性已更改。现在，我想调用一个函数来保留属性。但是最好的方法是什么？

我可以将观察者绑定到属性but this is consindered bad.
我可以将一个动作绑定到输入的点击上。
```
{{input ... input=(action "actionName") click=(action "actionName")}}
```
这不起作用，因为调用操作时属性仍然具有旧值。

扩展类复选框：

import Checkbox from '@ember/component/checkbox';
Checkbox.reopen({
    onChange: null,
    change() {
        this._super();
        if (this.onChange) this.onChange();
    }
});
...
{{input ... onChange=(action "actionName")}}

但是功能更改is not documented，即使the source code 表示可以重写。

我可以将操作绑定到didUpdate或didUpdateAttrs，但是该操作被调用了两次。就我而言，这不是问题，因为该属性是模型的一部分，所以我可以在操作中调用model.get('hasDirtyAttributes')。 [更新] 在我的测试案例中，该动作被调用了两次，但是在我的真实代码中，该动作仅被调用了一次，所以这似乎是最好的解决方案？ [/ Update]

那么正确的ember.js方法是什么呢？

Answer 1

我个人更喜欢与复选框绑定的一种方法。我像这样使用本机input：

<input type="checkbox" checked={{myValue}} onclick={{action (mut myValue) value="target.checked"}}>

选中此twiddle即可看到它的实际效果。这是用于1路绑定复选框的最简单的非库方法，我认为这是从2.x版本开始的“ ember-way”（尽管我确实知道人们仍然喜欢并使用2路绑定输入，就我所能描述的情况而言，还需要观察者）。

在我的一个项目中，我使用ember-paper，它使用了一个显示良好的复选框，没有input，并且我相信a11y的正确aria绑定。他们利用click来调用onChange

click() {
    if (!this.get('disabled')) {
      invokeAction(this, 'onChange', !this.get('value'));
    }
    // Prevent bubbling, if specified. If undefined, the event will bubble.
    return this.get('bubbles');
}

可以与以下api一起使用

{{#paper-checkbox value=value1 onChange=(action (mut value1))}}
    A checkbox: {{value1}}
{{/paper-checkbox}}

如果您想要一个比本机更好的复选框，则可以看到example以及template和component js是如何实现灵感的

Answer 2

看看我的ember-twiddle示例。

我建议使用df_goal <- data.frame(first = c(1,2,3,4), second = c(5,6,7,8)) rownames(df_goal) <- c('a','b','c','d') first second a 1 5 b 2 6助手，

input

切换动作内的属性

({input type="checkbox" click=(action "setProperty") checked=my_property}}

如果您使用的是最新版的余烬setProperty() { // toggle the property on click this.toggleProperty("my_property"); console.log(this.get('my_property')); // returns true or false based on the checked value .. // do whatever stuff you want }，请查看this

应对变化的复选框的合适ember.js方法是什么

2 个答案: