使用 Mithril.js，为什么我的 onclick 处理程序不修改秘银组件?

Question

我正在制作一个测验网络应用程序。 我有一个名为"answerBox"的类，目前只包含一个按钮、一个 ID 和一个布尔值。 我想调用一个"检查答案"函数来确定我的答案是否正确。

我将 onclick 分配给一个匿名函数，并向该函数发送一个与 answerBox 相同的对象，但 onclick 处理程序不会更改我的 answerBox 对象。 它似乎正在创建本地副本。 代码在这里：

//currently just boilerplate checkAnswer function.  Eventually will involve server calls.  It is the client-side
//controller
function checkAnswer(ansBox)
{
console.log(ansBox.IDString);
if(ansBox.IDString == "Hello")
{
console.log("BEFORE: " + ansBox.IDString);
ansBox.IDString = "Goodbye";
console.log("AFTER: " + ansBox.IDString);
return true;
}
else
{
ansBox.IDString = "Hello";
return false;
}
}
class answerBox{
constructor(IDString){
this.IDString = IDString;
this.isCorrect = false;
//to register the onclick, we need a reference to this, which we can't have unless we 
//create it, since the button's "this" is not the same as the answerBox's "this", hence, "that".
var that = this;
this.checkButton = m("button",{onclick: function(){that.isCorrect = checkAnswer(that); console.log(that.isCorrect)}},"Check" + this.IDString + " " + this.isCorrect);
}
view()
{
return this.checkButton;
}
}

我有一个使用秘银挂载到根目录的 answerBox 变量，它在网页中显示得很好。 当我单击网页上的按钮后查看控制台时，我得到：

Hello
BEFORE: Hello
AFTER: Goodbye
true

现在，发生了两件事：

1. 该按钮不会更改它所说的内容。 如果 answerBox 变量确实被修改过，那么它的 IDString 应该为 "Goodbye"，但它没有
2. 当我再次单击该按钮时，我看到完全相同的控制台输出，表明没有任何变化。

我做错了什么？

Answer 1

编写组件的方式存在一些问题：

首先，构造函数被编写为接受单个参数，IDString- 但所有 Mithril 组件方法(包括构造函数(都会接收一个vnode对象，其中包含在调用组件时通过超脚本传入的attrs和children。因此，假设您将按如下方式调用组件：

m(answerBox, {IDString: 'answerBox1'})

。然后，您将编写组件以在构造函数中接收IDString，如下所示：

class answerBox {
constructor(vnode){
this.IDString = vnode.attrs.IDString;

下一个问题是，answerBox视图在实例化后永远不会更改，因为它的内容在定义this.checkButton时只在构造函数中计算一次。与其计算视图并将其分配给属性只是为了调用该属性，不如直接将其写入视图函数。然后，该组件将变为：

class answerBox {
constructor(vnode){
this.IDString = vnode.attrs.IDString;
this.isCorrect = false;
}
view(){
var that = this;
return m("button", {
onclick: function(){
that.isCorrect = checkAnswer(that); 
console.log(that.isCorrect)
}
},
"Check" + this.IDString + " " + this.isCorrect
);
}
}

上面的代码应该会产生预期的结果！