个人中心
gpt4 book ai didi

jquery - 将普通方法与 Knockout View 模型绑定(bind)

转载 作者：行者123 更新时间：2023-12-03 10:59:51 27 4
gpt4 key购买 nike

我看到一段关于 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/

27 4 0
文章推荐： c# - 如何在 TaskScheduler.FromCurrentSychronizationContext 的延续中使用 Task.Result？
文章推荐： sql - 为什么在 SQL Azure 上运行查询速度如此之慢？
文章推荐： pdf - iText - 生成没有证书链的 PDF 哈希
文章推荐： c# - 在 MVVM 中创建 WPF 动态面板
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com