Knockout.js：自定義綁定中的數組參數

Question

我嘗試編寫自定義列表綁定。 這是我到目前為止所擁有的：

var myArr = ko.observableArray();
myArr.push("foo");
myArr.push("bar");

var view = {
    matches: myArr
}

ko.bindingHandlers.matchList = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            // gives me 0
            console.log(valueAccessor().length);
            // gives me 2
            console.log(valueAccessor()().length);

        },
    };

// Activates knockout.js
ko.applyBindings(view);

我的html綁定如下所示：

<div data-bind="matchList: matches"></div>

為什么我必須使用第二對括號才能進入數組？

Answer 1

valueAccessor是一個函數，它返回傳遞給綁定的內容。 它包裝在一個函數中，因此不會立即對其求值。

一個典型的模式是：

var value = ko.utils.unwrapObservable(valueAccessor());

ko.utils.unwrapObservable將安全地處理可觀察值和不可觀察值，並返回值。 因此，如果它是可觀察的，則它將返回yourValue() ，否則將僅返回yourValue 。 這使您的綁定支持對可觀察屬性或純屬性的綁定。

另外，某些綁定需要處理可觀察對象本身，而某些綁定需要處理可觀察對象的值。 因此，默認情況下，可觀察對象未展開。 因此，valueAccessor（）返回您的observable（它是一個函數），然后由您決定是否要對其進行拆包以獲得值或可能設置其值。

Answer 2

我認為這里令人困惑的是，傳遞給init的valueAccessor與傳遞給update的同名參數不同。 在初始化中，它是一個返回函數的函數，而函數又返回您的數組。 從他們的文檔中查看此示例代碼。 我在末尾添加了兩個控制台日志，這些日志應該向您顯示valueAccessor（）返回的函數：

var myArr = ko.observableArray();
myArr.push("foo");
myArr.push("bar");

var view = {
    matches: myArr
}

ko.bindingHandlers.matchList = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
            $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
            console.log(value);
            console.log(valueAccessor().toString());
        }
    };

// Activates knockout.js
ko.applyBindings(view);