knockout.js - Passing parameters to a function in knockoutjs viewmodel

Question

I have anchor tag like this

<a href="#" class="btn btn-success order-btn" data-bind="attr:{'data-tiername':$data.tierName, 'data-identifier' : $parent.identifier}, click: $root.setPath.bind($data,$data.tierName, $parent.identifier)">Send values</a>

In the viewmodel

var appViewModel = {
    setPath: function (data, tier, identifier) {
        alert(data);
        alert(tier);
        alert(identifier);
    },
...........
...........
}

The result is some knockoutjs core code being displayed in alert message (possibly definitions of observable(),dependentObservable() functions and [Object object] which is empty when alerted with JSON.stringify)

why does this work?

data-bind="attr:{'data-tiername':$data.tierName, 'data-identifier' : $parent.identifier}

but not this:

click: $root.setPath.bind($data,$data.tierName, $parent.identifier)

note that tierName is an observable(), identifier is computed()

Where can I find more about bind() ??

Answer 1

The first parameter to bind is the target (what you want this to be) when your function is executed. So, if you want data to be the first argument, then it needs to be the second argument.

Inside your function, if you are dealing with observables or computed observables, then you need to unwrap them to see their value. You would do this either by calling it as a function alert(data()); or by calling alert(ko.utils.unwrapObservable(data)); (which is generally used when you don't know at design type if what you are going to be dealing with is an observable or a non-observable.

The reason that attr and other bindings work when you pass an observable/computed observable is that they all call ko.utils.unwrapObservable for you for convenience (so you don't have to add () when passing observables unless you are writing an expression !$data().

Here is some reference on bind: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind