Question

I am using knock out for my binding purposed and i am working on a share module. basically, there are couple of links and they all are basically calling the same function just with different values. For example, when you click on the Facebook then all the service with value “Facebook” and when and when you click on Twitter then call the function with the value “Twitter”. But basically calling the same function. Now that there is not way to specify parameters from HTMl because all I can do is something like data-bind=”click: Share”. Here we cans see that I can not specify any parameters here.

Now I can create an ko.observable in my js file which this function will take as an argument… but I need a way to write on that observable from html click event when different links are clicked. Any idea on how to do it?

Answer 1

Knockout passes the current context to any function used in data binding. This means that if you call click: share it will pass in the service you have bound. Here is a fiddle demonstrating this, but I’ll put in the code here since its pretty basic.

For more complex bindings, your object will likely have a name property, which you can use in place of $data, as well as use in your share() function.

HTML:

<ul data-bind="foreach: services">
    <li data-bind="text: $data, click: $parent.share" />
</ul>​

Javascript:

data = [
"Facebook",
"Twitter",
"Flickr",
"SomeOtherWeb2.0 Service"
];

var ViewModel = function(data) {
    this.services = ko.observableArray(data);
    this.share = function(service){
        alert("You Clicked on: " + service);
    };

};

ko.applyBindings(new ViewModel(data));​