Intercepting the knockout list with a checkbox and click button

Here's my jsfiddle for illustration:

I have a list of json objects that I want to bind in a ul using jquery templates, in each li element I have a checkbox for each element along with details. I want it to work:

When the user clicks this checkbox, the item will be updated in the selected list (Got this work)

When the user clicks on the details of the elements, the element will be selected and I will display all the details on the right. This is why I am putting items on an element inside.

As you can see from the fiddle, it doesn't work the way I want it to work, the anchor click is triggered even when the viewModel is first applied, and when I click on that checkbox it fires a click event.

Can you have knockout gurus help me with this, please. Thanks to


source to share

1 answer

I see a couple of little things:

1- you should not use the binding checked

and value

for the same item. Binding value

will attach event handlers just like binding checked

. In this case, you just want to make sure the attribute is value

set and is not handling any events, so you can do:checked:$parent.checkedPeople, attr: { value: Id }

2- click binding assumes a reference to a function, not the result of the function being executed. So you passed: click: $parent.selectPerson(Id())

. This will execute the function at binding time and try to bind it to the result (which would be inefficient if the result was not actually a function). An alternative could be the following: click: function() { $parent.selectPerson(Id()); }

. However, it is narrow to have anonymous functions in the markup, so the better choice is click: $parent.selectPerson

. The current one $data

will be passed as the first argument and you can read it Id


Here is the updated fiddle:



All Articles