如何使用自定义绑定与 ko.observableArray()答案

【问题标题】：How to use custom binding with ko.observableArray()如何使用自定义绑定与 ko.observableArray()
【发布时间】：2013-01-20 20:43:20
【问题描述】：

淘汰赛自定义绑定如何与 observableArray 一起使用？当使用带有自定义绑定的 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>

【问题讨论】：

标签： knockout.js ko-custom-binding

【解决方案1】：

您需要在自定义绑定中创建对 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)");
        }
    };

这适用于您的可观察示例的原因是因为单个元素上的所有绑定都是一起触发的（更多信息here）。

这在您的其他绑定上的行为方式不同的原因是foreach 的行为方式不同。对 observableArray 的更改不会直接触发 foreach 绑定（否则将重新渲染整个部分）。相反，它会在单独的 ko.computed 中触发逻辑，评估数组的变化情况并进行必要的增量更新（添加项目、删除项目等）。

【讨论】：

谢谢，有趣的信息——这些是我希望在 knockoutjs 文档中得到的信息——至少我们有这样的东西:)