Knockout list binding with a checkbox and click handle

Question

Here is my jsfiddle for illustration: http://jsfiddle.net/hawaii/gN6CT/10/

I have a list of json objects that I want to bind into an ul using jquery templates, in each li I have a checkbox for each item, together with the item details. The way I want it to work is:

When user click on the checkbox, the item will be updated into a selected list ( Got this working)

When user click on the details of the items, the item will be the selected one and I will display all the details on the right. That's why I am putting the items details inside an element.

As you can see from the fiddle, it isn't working the way I want it to work, click binding is called even when the viewModel first applied, and when I click on the checkbox, it calling the click event as well.

Can you knockout gurus help me on this please. Thanks

Answer 1

I see a couple of small things:

1- you should not use both the checked and value binding on the same element. The value binding will attach event handlers, as will the checked binding. In this case, you just want to ensure that the value attribute is set and not handle any events, so you can do: checked:$parent.checkedPeople, attr: { value: Id }

2- the click binding expects a reference to a function and not the result of a function being executed. So, you were passing: click: $parent.selectPerson(Id()). This will execute the function during binding and try to bind against the result (which would not be effective, unless the result was actually a function). An alternative would be to do: click: function() { $parent.selectPerson(Id()); }. However, it is ugly to have anonymous functions in the markup, so a better choice would be to simply do: click: $parent.selectPerson. The current $data will be passed along as the first argument and you can read the Id off of it.

Here is an updated fiddle: http://jsfiddle.net/rniemeyer/gN6CT/11/