在 knockout.js 自定义绑定中未调用更新答案

【问题标题】：Update is not called in knockout.js custom binding在 knockout.js 自定义绑定中未调用更新
【发布时间】：2015-08-10 17:06:00
【问题描述】：

这是一个代码sn-p

<!DOCTYPE html>

<html>
<body>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

    <div>
        <div data-bind="yourBindingName: someValue ">
        </div>
        <button data-bind="click: clickme">Click me!</button>
    </div>

    <script type="text/javascript">
        ko.bindingHandlers.yourBindingName = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                console.log("init");
            },
            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                console.log("update");
            }
        };

        function ViewModel() {

            this.someValue = ko.observable('test');

            this.clickme = function () {
                console.log('clickme');
                this.someValue('');
            }
        }
        ko.applyBindings(new ViewModel());
    </script>

</body>
</html>

点击“点击我！”后按钮控制台中只有“clickme”，从不“更新”。我希望每次绑定值更改时都会触发更新函数。

【问题讨论】：

标签： knockout.js

【解决方案1】：

它确实记录“更新”，但在您单击按钮之前。 Knockout 已经运行过一次，并且在运行时检查了绑定处理程序使用了哪些 observables。由于您没有访问其中的valueAccessor（或其他任何内容），它知道当someValue 更改时它不需要在绑定处理程序上调用update - 这将浪费处理时间。如果您更新绑定处理程序以使用它，它将在someValue 更改时调用，即您第一次单击按钮时：

ko.bindingHandlers.yourBindingName = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        console.log("init: " + valueAccessor()());
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        console.log("update: " + valueAccessor()());
    }
};

这是一个演示：

ko.bindingHandlers.yourBindingName = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        console.log("init: " + valueAccessor()());
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        console.log("update: " + valueAccessor()());
    }
};

function ViewModel() {
    
    this.someValue = ko.observable('test');
    
    this.clickme = function () {
        console.log('clickme');
        this.someValue('');
    }
}
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
(Open your dev tools to view the console)
<div data-bind="yourBindingName: someValue ">
</div>
<button data-bind="click: clickme">Click me!</button>

【讨论】：