knockout 自定义绑定(bind)如何与 observableArray 一起使用？当使用带有自定义绑定(bind)的 ko.observable() 时，一切都按预期工作。当使用 ko.observableArray() 时，只会抛出初始事件(init 和 update 一次)，但不会检测到进一步的变化(见 Fiddle 或下面的代码)。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="knockout-2.2.1.js"> </script>
</head>
<body>
<div data-bind="text: Observable, updateBinding: Observable"></div>
<div data-bind="foreach: ObservableArray, updateBinding: ObservableArray">
<span data-bind="text: $data"></span>
</div>
<script type="text/javascript">
ko.bindingHandlers['updateBinding'] = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
alert("Binding Handler (Init)");
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
alert("Binding Handler (Update)");
}
};
function ViewModel() {
var self = this;
self.ObservableArray = ko.observableArray();
self.Observable = ko.observable();
}
var viewModel = new ViewModel();
// Fires Init + Update for Observable and ObservableArray
ko.applyBindings(viewModel);
// Fires Update for Observable
viewModel.Observable(1);
// Does nothing
viewModel.ObservableArray.push('1');
</script>
</body>
</html>
最佳答案
您将希望在自定义绑定(bind)中创建对 observableArray 的依赖项。所以，至少是这样的:
ko.bindingHandlers.updateBinding = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
alert("Binding Handler (Init)");
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
//create a dependency, normally you would do something with 'data'
var data = ko.utils.unwrapObservable(valueAccessor());
alert("Binding Handler (Update)");
}
};
这适用于您的可观察示例的原因是因为单个元素上的所有绑定(bind)都是一起触发的(更多信息 here)。
这在您的其他绑定(bind)上的行为方式不同的原因是
foreach行为不同。对 observableArray 的更改不会触发 foreach直接绑定(bind)(或者整个部分将被重新渲染)。相反，它在单独的 ko.computed 中触发逻辑，该逻辑评估数组如何更改并进行必要的增量更新(添加项目、删除项目等)。
关于knockout.js - 如何使用自定义绑定(bind)与 ko.observableArray()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14715724/