在敲出.js自定义绑定中未调用更新 [英] Update is not called in knockout.js custom binding
问题描述
这是一个代码段
<!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"，而从不更新".我希望每次绑定值更改时都会触发更新函数.
After clicking the "Click me!" button there is only 'clickme' in console and never 'update'. I expect the update function to be fired every time its bound value changed.
推荐答案
它确实记录了更新"，但是在您单击按钮之前.淘汰赛已经运行了一次，并且在运行时检查了绑定处理程序使用了哪些可观察的对象.由于您不访问其中的valueAccessor(或其他任何内容)，因此它知道在someValue更改时不需要在绑定处理程序上调用update，这将浪费处理时间.如果您更新绑定处理程序以使用它，则在someValue更改时，即第一次单击按钮时，它将被调用:
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. If you update your binding handler to use it, it will be called when someValue changes, ie the first time you click the button:
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>
这篇关于在敲出.js自定义绑定中未调用更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
