CODEWITHSUNDEEP
jquerybindingknockout.jsclick
Yooz
Yooz

Reputation: 2518

Knockout Jquery binding click does not work

First question! Hope I do it well.

I have this bound list : 

<table id="restaurants_list" data-bind="foreach : restaurants" style="display: none">
    <tr>
        <td data-bind="text:name"></td>
        <td data-bind="text:address.address1"></td>
        <td data-bind="text:address.address2"></td>
        <td data-bind="text:address.postcode + ' ' + address.suburb"></td>
        <td>
            <input type="button" value="show" data-bind="click: $root.showmap" />
        </td>
    </tr>
</table>
<div id="map"></div>

And here the modelview :

function RestaurantsViewModel() {
    var self = this;
    self.restaurants = data;
    self.showMap = function (restaurant) {
        $("#map").show();
        ....
    };
    showMap(restaurants[0]);
};

Finally the binding :

$(document).ready(function () {
    $("#link_get_restaurants").bind("click", get_restaurants);
});
function get_restaurants(event) {
    $("#restaurants_list").show();
    ko.applyBindings(new RestaurantsViewModel());
}

The first showmap(restaurants[0]) works fine. But, the click : $root.showmap does not fire.

So did I do something wrong? I use Jquery as well, I don't know if it could come from that.

Thanks.

Upvotes: 0

Views: 1265

Answers (2)

Matus
Matus

Reputation: 437

Try these 2 steps:

1) Replace

click : $root.showmap

with

click : $root.showMap

2) Curse the case sensitivity :)

Upvotes: 5

Srikanth Venugopalan
Srikanth Venugopalan

Reputation: 9049

showmap is spelt wrong in the binding (your method is showMap). Can you try binding to $root.showMap?

<input type="button" value="show" data-bind="click: $root.showMap" />

Upvotes: 2

Related Questions