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

Since tierName and identifier are observables, you need to call them to access to their values:

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

Also, first argument in bind() will be bound to this in setPath, so I guess you need something like this:

click: $root.setPath.bind(/*will be bound to this*/ $root, $data, 
                      $data.tierName(), $parent.identifier())

Finally, if $data itself is an observable (which is not clear if it is from you code), then you need to call it as well:

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

Also remember bind has been introduced in ECMAScript 5, so it may not be present in all browsers. So I would probably do something like this instead:

click: function(){$root.setPath($data, $data.tierName(), $parent.identifier());}

Here is additional info on bind.