Mithril.js m.withAttr: 将事件传递给另一个函数

Question

我正在阅读 Mithril tutorial，但无法理解 m.withAttr。该指南在视图层中有以下行：

m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})

我有两个问题。

1) 我理解上半部分 onclick: m.withAttr("checked", task.done) 的意思是： 'set task.done, using m.prop, to the value of the "checked" attribute'。但是下半场的目的是什么，checked: task.done()？好像只是在重复前半部分

2) 在学习本教程时，我想添加将 Todos 持久化到持久层的功能。我创建了一个保存函数，这样我就可以将上面引用的行重构为如下内容：

m("input[type=checkbox]", { onclick: todo.vm.markAsDone.bind(todo.vm, task)})

在我的视图模型中，我有以下功能：

vm.markAsDone = function(todo) {
      m.withAttr("checked", todo.done), checked: todo.done();
      todo.save();
    };

但这没有用；我收到 Uncaught SyntaxError: Unexpected token : 错误。我认为问题是事件没有正确绑定到 markAsDone 函数，所以它不理解 "checked" 属性；但我不确定如何解决这个问题（如果这就是问题的话）。

感谢您的帮助。

Answer 1

问题 1

m() 函数的第二个参数定义 HTML 元素的属性，在本例中 <input type=checkbox> 将被装饰。（例外是特殊的 config 字段）

checked判断输入复选框是否被勾选，所以需要显示任务的状态。
onclick 是将修改状态的事件处理程序。

所以属性做不同的事情，因此它们都是必需的。

问题二

由于 markAsDone 传递了一个 todo 模型，您不必在那里进行任何 m.withAttr 调用。只需修改模型，让 Mithril 重绘视图即可。如果您通过 onclick.

之类的事件调用 markAsDone，则重绘会自动发生

如果您想了解有关重绘过程的更多信息，我将其总结在。

编辑：markAsDone 可能看起来像这样：

vm.markAsDone = function(todo) {
    todo.done(true);
    todo.save();
};

Mithril.js m.withAttr: 将事件传递给另一个函数

Mithril.js m.withAttr: Passing event to another function

javascript

mithril.js