我看到一段关于 Knockout 的代码并通过了它，但我无法理解这段代码是如何工作的。这是将普通方法与 Knockout View 模型绑定(bind)的完整代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/knockout-2.2.1.js"></script>
<script src="Scripts/jquery-1.7.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" data-bind="click: callalert" name="knockoutbtn" value="Call Knockout Method"/>
<input type="button" name="normalbtn" id="nbtn" value="Call Normal Method"/>
<script type="text/javascript">
var callmethod = function () { //Normal Method which would be
alert('hello'); //called from knockout binding
} //also from the normal button click
$(document).ready(function () { //Binded the Method with normal button
$("#nbtn").live("click", callmethod);
});
ko.applyBindings({ //Binded the method with ko view model
callalert : callmethod
});
</script>
</div>
</form>
</body>
</html>
我只是不明白这段代码的含义是什么:
data-bind="click: callalert"而且也不明白这段代码:ko.applyBindings({ //Binded the method with ko view model
callalert : callmethod
});
似乎当用户单击第一个按钮时，将调用一个名为
callalert 的方法。但在代码中没有名为 callalert 的方法.当用户单击第二个按钮时，将调用一个名为 callmethod 的方法.所以请帮助我理解上面的代码。尤其是这两点
1) data-bind="click: callalert"
2) ko.applyBindings({ //Binded the method with ko view model
callalert : callmethod
});
更新
假设如果有人在下面看到它
var person = {
firstName: 'John',
lastName: 'Doe',
sayHi: sayHiFunction,
pets: ['Cat', 'Dog']
};
那么谁会理解 sayHiFunction 是一个函数，因为没有像 sayHiFunction() 这样的括号？
如果您查看上面的代码，那么您可以看到
$(document).ready(function () { //Binded the Method with normal button
$("#nbtn").live("click", callmethod);
});
该 callmethod 由 jquery 代码调用。那么为什么在用户单击按钮时需要调用 callmethod 的代码中定义了两次。一旦它由 jquery 完成，一旦它由 knockout 绑定(bind)完成？你能详细解释一下吗？
如果我删除 jquery 部分，那么当用户单击按钮时将调用 callmethod。
等待你的答复。谢谢
最佳答案
Javascript 对象
{ callalert : callmethod }
是具有一个属性的常规 javascript 对象:
callalert .在 JS 中，您可以以键值对的方式构造对象:var person = {
firstName: 'John',
lastName: 'Doe',
sayHi: function() {
alert('Hi!');
},
pets: ['Cat', 'Dog']
};
这构造了一个对象，我们将其放入变量
person并给出四个属性:两个普通属性(字符串类型)，一个函数和数组。因为在 JS 中，函数也是对象，你可以把它们放在变量中，然后就这样使用它们。因此，您可以定义一个函数并将其放入变量中(就像您对
callmethod 变量所做的那样)，然后将其分配给对象的成员(就像您对 callalert 属性所做的那样)。这也适用于我的示例:
var sayHiFunction = function() {
alert('Hi!');
};
var person = {
firstName: 'John',
lastName: 'Doe',
sayHi: sayHiFunction,
pets: ['Cat', 'Dog']
};
knockout 申请绑定(bind)
下一个，
ko.applyBindings
接受一个 javascript 对象。通常，您会使用具有可观察属性(由 Knockout 处理的属性)的对象，但您也可以在其中包含函数。
在您的情况下，您只有一个功能。函数的实现是
callmethod并且要调用的标识符是callalert .所以，如果你这样做:
var myVariable = { callalert : callmethod };
myVariable.callalert();
你会得到警报。您已经有效地创建了一个具有一个成员(
callalert )的对象，该成员是一个函数(具有 callmethod 的实现)，并将其放入 myVariable .knockout 数据绑定(bind)
现在，什么
data-bind="click: callalert"这样做是让 Knockout 知道它应该数据绑定(bind) click事件到callalert viewmodel 的属性(传递给 applyBindings 的对象)。所以当你点击按钮时，Knockout 会调用 viewmodel 上的 callalert 方法。更新 - jQuery
jQuery 代码确实更具可读性。但是当你有复杂的 UI 时，它通常需要大量的 jQuery 代码(用于隐藏、显示、更新等控件)。这很容易变得难以维护和阅读。为此，Knockout 及其 MVVM 方法可以提供帮助。
代码有两次的原因是为了显示我相信的差异。第一个按钮使用 Knockout 调用方法，第二个按钮使用 jQuery。
两者都是有效的方法。事实上，如果它就这么简单，我会推荐 jQuery。但是，如果您有更复杂的 UI，或者如果您的项目在其他屏幕中使用它，您可能希望使用 Knockout。
至于
how anyone would understand that sayHiFunction is a function because there is no bracket like sayHiFunction() ?
你不能马上，但你知道它是一个变量，所以如果你寻找这个变量，你会发现。但是除非您需要在运行时动态设置函数的实现，否则您没有理由这样编写它。您可以内联编写函数:
var person = {
sayHi: function() {
alert('Hi');
}
}
但即便如此，您仍然可以更改它:
person.sayHi = function() {
alert('Hello!');
}
这使得 JS 成为一种强大的语言，但对于初学者来说确实并不总是易于阅读。
关于jquery - 将普通方法与 Knockout View 模型绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17565629/