HTML复选框和meteorJS答案

【问题标题】：HTML checkbox and meteorJSHTML复选框和meteorJS
【发布时间】：2016-02-09 22:03:25
【问题描述】：

meteorJS TODO 教程中的这段代码我没有完全看懂：

HTML：

<input type="checkbox" checkbox="{{checked}}" class="toggle-checked" />

Javascript：

"click .toggle-checked": function(){
  Tasks.update(this._id, {
    $set: {checked: ! this.checked}
  });

所以程序正在监听class:toggle-checked 的点击事件，并使用$set 运算符更新mongoDB 以创建一个属性“checked”，其值not 等于HTML 输入的“checked”属性班级：toggle-checked.

为什么不相等？

【问题讨论】：

HTML 看起来不太好。 JavaScript 似乎也不完整。你能请edit它做得更好吗？在底部编辑时查看预览。
抱歉，这是我第一次使用 stackoverflow。
没问题。可以请edit 做得更好吗？

标签： javascript jquery html mongodb meteor

【解决方案1】：

由于 db 中的 checked 字段包含一个布尔值，因此在呈现复选框时，它使用 checked 值作为其状态。当复选框状态发生变化时，checked 字段也会发生变化。

让我们用一个非常基本的例子来应用这个逻辑：

Action        this.checked value    Initial checkbox state      Updated checked value
===========================================================================================

None          false                 not-checked                 false (no action triggered)
Click         true                  checked                     true
Click         false                 not-checked                 false

【讨论】：

【解决方案2】：

使用 $set 运算符更新 mongoDB 以创建一个属性“checked”，其值不等于 HTML 输入类的“checked”属性：toggle-checked

从你上面的陈述来看，在我看来你被this.checked弄糊涂了。在事件处理程序中，this 实际上是指当前模板的数据上下文，因此，this.checked 不是 HTML 元素的选中属性值。

所以，当一个任务没有被选中时，它的选中字段中的值将会是假的。因为this 指的是这个数据上下文，所以this.checked 也是错误的。但是当您单击.toggle-checked 复选框时，您希望将选中字段的值设置为true。因此，我们将选中字段的值设置为! this.checked。在本例中，我们没有使用 HTML 元素的选中值来更新选中状态。

【讨论】：