Knockout foreach binding calling click event while iteration

Question

I'm using knockout's foreach to draw table with clickable cells First column and table headers are used for population values inside table.

 <tbody>
        <!--ko foreach: $root.schedules -->
        <tr>
            <td data-bind="text: FromTo "></td>
            <!-- ko foreach: $root.weekdays -->
            <td data-bind="css:{selected:$root.objectForEdit().isSelected(id, $parent.Id) }, click: $root.changeEditObj(id, $parent.Id), with: $root.getDetailsModel(id, $parent.Id)">
                <span data-bind="text: lesson"></span>
            </td>
            <!-- /ko -->
        </tr>
        <!--/ko-->
    </tbody>

As it can be seen from code snippet I'm using some css binding and also binding modal pop-up dialog to cell click event.

Table is drawn as expected, everything is working fine, but first time when form loads my modal form is poping up even there is no cell click happening. I've tried to figure out why this happening and found that inside iteration knockout is not only binding click event but calling click event's handler function (which is showing pop-up) as well.

I'm assuming problem is with knockout binding. Is there any solutions for this problem? How can I avoid function call inside foreach iteration ?

possible give us a fiddle reproduces your case . Try doing this click:function(){ $root.changeEditObj(id, $parent.Id)} instead of $root.changeEditObj(id, $parent.Id) . cheers — super cool
– super cool, Commented Aug 17, 2015 at 9:48

Community · Accepted Answer · 2017-05-23 11:51:38Z

8

Thanks Chaim. I accidentally deleted his answer.

I've changed

click: $root.changeEditObj(id, $parent.Id)

to

click: $root.changeEditObj.bind(this, id, $parent.Id)

and it solved the problem.

This also worked fine:

click: function{$root.changeEditObj(id, $parent.Id)}

Additional Information on this can be found here

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Aug 17, 2015 at 10:17

Izzatkhon Shamiev

2912 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wayne Ellery Over a year ago

According to the documentation the correct syntax is click: $root.changeEditObj.bind($data, id, $parent.Id)

Collectives™ on Stack Overflow

Knockout foreach binding calling click event while iteration

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related