什么是正确的余烬.js对不断变化的复选框做出反应的方式

Question

我有一个这样的复选框：

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

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

1. 我可以将观察者绑定到财产上，但这是不好的。

2. 我可以将一个动作绑定到输入 oder click。

   {{input ... input=(action "actionName") click=(action "actionName")}}
   

   这不起作用，因为在调用操作时，该属性仍具有旧值。

3. 扩展类复选框：

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

   但是函数更改没有记录，即使源代码表明可以覆盖它是可行的。

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

那么，正确的余烬.js方法是什么呢？

Answer 1

我个人更喜欢与复选框绑定的单向绑定。我像这样使用本机input：

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

检查这个 twiddle 以查看它的实时运行。这是最简单的非库方法，用于 1 向绑定复选框，我认为这是 2.x 的"余烬方式"(尽管我知道人们仍然喜欢和使用 2 向绑定输入，据我所知，在您描述的情况下，这更需要观察者)。

在我的一个项目中，我使用余烬纸，它使用了一个没有input的漂亮显示复选框，我相信 a11y 的正确咏叹调绑定。他们利用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}}

您可以看到示例以及如何实现模板和组件 js 以获得灵感，如果您想要一个比本机更好看的复选框

Answer 2

看看我的余烬-twiddle示例。

我建议使用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
}

如果你在最新版本的余烬3.9，看看这个