Question

请查看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form data-bind="with: selectedMerchant">
        <h1 data-bind="text: name"></h1>
        <button data-bind="click: show"> SHOW </button>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script>
    <script>
        function PartnersViewModel() {
            self.selectedMerchant = ko.observable({'name': 'John'});
            self.show = function() {
                alert(JSON.stringify(self.selectedMerchant()));
            }
        }
        ko.applyBindings(new PartnersViewModel());
    </script>
</body>
</html>

如您所见，行：

<form data-bind="with: selectedMerchant">

使对象“选择”商标＆＃39;表单的绑定上下文。这就是为什么在＆＃39; h1＆＃39; -tag中，我们会看到名称＆＃39; John＆＃39;。

但是，行：

<button data-bind="click: show"> SHOW </button>

说（据我所知），点击按钮后，方法＆＃34;显示＆＃34; 内部对象＆＃39; selectedMerchant＆＃39;将被调用。当然这个方法并不存在于selectedMerchant中，所以我希望看到一个错误。

令我惊讶的是，它工作正常，我得到一个弹出窗口说：

{＆＃39; name＆＃39;：＆＃39; John＆＃39;}

我不明白为什么knockout.js会调用一个超出对象“选择的商品”的方法。有没有人有一个很好的解释？

Answer 1

您在视图模型声明的开头缺少var self = this;。

如果没有声明self，则行self.show = function() { ...会在show对象上声明一个全局window函数，这就是KO可以找到此处理程序的原因。

因此，如果正确声明self，您的代码就会出现预期错误：Message: show is not defined

<script>
    function PartnersViewModel() {
        var self = this;
        self.selectedMerchant = ko.observable({'name': 'John'});
        self.show = function() {
            alert(JSON.stringify(self.selectedMerchant()));
        }
    }
    ko.applyBindings(new PartnersViewModel());
</script>

淘汰赛是否有可能忽略＆＃39; data-bind = with ...＆＃34; ？

1 个答案: