Knockout.js: array parameter in custom binding

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?

RP Niemeyer · Accepted Answer · 2011-09-10 15:21:42Z

4

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.

edited Sep 10, 2011 at 15:21

answered Sep 10, 2011 at 13:52

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milimetric · Accepted Answer · 2011-09-10 13:53:31Z

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

Collectives™ on Stack Overflow

Knockout.js: array parameter in custom binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related