Question

我看到了一段关于Knockout的代码并经历了它，但我无法理解这段代码是如何工作的。以下是将普通方法与Knockout视图模型绑定的完整代码。

<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完成并且一旦它由敲除绑定完成？你可以详细解释一下。

如果我删除了jquery部分，那么当用户点击按钮时将调用callmethod。等待你的答复。感谢

Answer 1

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 applyBindings

接下来，

ko.applyBindings

接受javascript对象。通常，您将使用具有可观察属性的对象（由Knockout处理的属性），但您也可以使用其中的函数。

在您的情况下，您只有一个功能。该函数的实现是callmethod，要调用的标识符是callalert。

所以如果你愿意的话：

var myVariable = { callalert : callmethod };
myVariable.callalert();

你会得到警报。您已经有效地创建了一个具有一个成员（callalert）的对象，该成员是一个函数（具有callmethod的实现），并将其放在myVariable中。

敲除数据绑定

现在，data-bind="click: callalert"做的是让Knockout知道它应该将click事件数据绑定到您的viewmodel的callalert属性（传递给applyBindings的对象）。所以当你点击按钮时，Knockout将在viewmodel上调用callalert方法。

更新 - jQuery

jQuery代码确实更具可读性。但是当你有复杂的UI时，它通常需要大量的jQuery代码（用于隐藏，显示，更新等控件）。这很容易变得难以维护和阅读。为此，Knockout及其MVVM方法可以提供帮助。

代码有两次的原因是为了显示我相信的差异。第一个按钮使用Knockout来调用方法，第二个按钮使用jQuery。

两者都是有效的方法。事实上，如果只是那么简单，我会推荐jQuery。但是如果您有更复杂的UI，或者您的项目在其他屏幕中使用它，您可能想要使用Knockout。

至于

任何人都会理解sayHiFunction是一个功能因为没有像sayHiFunction（）那样的括号？

你不能马上，但你知道它是一个变量，所以如果你寻找变量，你会发现。但除非您需要在运行时动态设置函数的实现，否则您没有理由像这样编写它。你可以编写内联函数：

var person = {
    sayHi: function() {
        alert('Hi');
    }
}

但即便如此，你仍然可以改变它：

person.sayHi = function() {
    alert('Hello!');
}

这使得JS成为一种强大的语言，但对初学者来说确实并不容易阅读。

使用Knockout View模型绑定Normal方法

更新

1 个答案: