Question

我在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以创建一个“已检查”的属性，其值不等于“已检查” HTML输入类的属性：toggle-checked。

为什么不相等？

Answer 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

Answer 2

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

从您的上述陈述中，我觉得您对this感到困惑。在事件处理程序中，this.checked实际上引用了当前模板的数据上下文，因此this不是HTML元素的已检查属性值。

因此，当未检查任务时，其checked字段中的值将为false。由于this.checked指的是此数据上下文，.toggle-checked也是错误的。但是当您单击! this.checked复选框时，您希望将checked字段的值设置为true。因此，我们将checked字段的值设置为<add key="InputDataFileName" value="InputData.xml" />。我们没有使用HTML元素的checked值来更新此示例中的checked状态。

HTML复选框和meteorJS

2 个答案: