8

ノックアウトカスタムバインディングはobservableArrayでどのように機能しますか？カスタムバインディングでko.observable（）を使用すると、すべてが期待どおりに機能します。ko.observableArray（）を使用すると、初期イベント（initとupdateが1回）のみがスローされますが、それ以上の変更は検出されません（以下の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>
4

1 に答える 1

8

カスタム バインディング内で 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)");
        }
    };

これが観察可能な例で機能する理由は、単一の要素のすべてのバインディングが一緒にトリガーされるためです (詳細はこちら)。

これが他のバインディングで同じように動作しない理由は、foreach動作が異なるためです。observableArray への変更はバインディングを直接トリガーしませんforeach(または、セクション全体が再レンダリングされます)。代わりに、配列がどのように変更されたかを評価し、必要な増分更新 (項目の追加、項目の削除など) を行う別の ko.computed でロジックをトリガーします。

于 2013-02-05T20:22:33.783 に答える