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.