简体   繁体   English

在敲门.js自定义绑定中未调用更新

[英]Update is not called in knockout.js custom binding

Here is a code snippet 这是一个代码片段

<!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>

After clicking the "Click me!" 点击“点击我!”之后 button there is only 'clickme' in console and never 'update'. 按钮,控制台中只有“ clickme”,而从不“更新”。 I expect the update function to be fired every time its bound value changed. 我希望每次绑定值更改时都会触发更新函数。

It does log an "update", but before you click the button. 确实记录了“更新”,但是在您单击按钮之前。 Knockout has run it once already, and whilst running has checked which observables your binding handler makes use of. 淘汰赛已经运行了一次,运行时检查了绑定处理程序使用了哪些可观察的对象。 Since you don't access valueAccessor (or anything else) within it, it knows that it doesn't need to call update on your binding handler when someValue changes - it would be a waste of processing time. 既然你不访问valueAccessor内它(或其他任何东西),它知道它并不需要调用update您绑定处理程序时someValue的变化-这将是处理时间的浪费。 If you update your binding handler to use it, it will be called when someValue changes, ie the first time you click the button: 如果您更新绑定处理程序以使用它,则它将在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()());
    }
};

Here's a demo: 这是一个演示:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM