0

我看到一段关于 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
            });

似乎当用户单击第一个按钮时，将调用一个方法 namedcallalert但在代码中没有方法 named callalert。当用户单击第二个按钮时，将调用一个名为 named 的方法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。等待你的答复。谢谢

4

1 回答 1

3

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']
};

淘汰赛applyBindings

下一个，

ko.applyBindings

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

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

所以，如果你这样做：

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

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

淘汰赛数据绑定

现在，data-bind="click: callalert"让 Knockout 知道它应该将click事件数据绑定到您的视图模型的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 成为一种强大的语言，但对于初学者来说确实并不总是易于阅读。

于 2013-07-10T08:24:23.433 回答