Knockout.js：自定义绑定中的数组参数

Question

i try to write a custom list-binding. This is what i have so far:

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);

My html binding looks as follow:

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

Why do i have to use the second pair of parentheses to get into my array?

Answer 1

The valueAccessor is a function that returns what was passed to the binding. It is wrapped in a function, so that it is not evaluated immediately.

A typical pattern would be to do:

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

ko.utils.unwrapObservable will safely handle both observables and non-observables and return the value. So, if it is an observable, then it will return yourValue() , otherwise it will just return yourValue . This allows your binding to support binding against either observables or plain properties.

In addition, some bindings need to deal with the observable itself and some bindings need to deal with the value of the observable. So, the observable is not unwrapped, by default. So, valueAccessor() returns your observable (which is a function) and then it is up to you to decide if you want to unwrap it to get the value or possibly set the value of it.

Answer 2

I think the confusing thing here is that the valueAccessor passed to init is different from the parameter of the same name passed to update . In init, it's a function that returns functions that in turn returns your array. Check out this sample code from their documentation . I added two console logs at the end that should show you the function that valueAccessor() returns:

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);