ObservableArray.push() триггеры click event

Question

Я создаю список объектов (студентов) для поиска. Когда я добавляю объекты в список, я также хочу добавить обработчик события click, который передаст мне идентификаторы объектов.

Я сделал наблюдаемую массив:

<script> 
self.studentList = ko.observableArray(); 

// (...) if search conditions are met, add student to array 
self.studentList.push(singleStudent); 

</script> 

И это HTML:

<tbody data-bind="foreach: studentList"> 
<tr> 
    <td><span data-bind='text: $data.Name, click: ClickEvent($data.Id)'></span></td> 
</tr> 

И функция, которая должна быть вызвана по щелчку:

<script> 
    function ClickEvent(pId) 
    { 
     console.log(pId); 
    } 
</script> 

щелканье сам работает хорошо. Проблема в том, что строка self.studentList.push(singleStudent) ТАКЖЕ вызывает событие.

Как добавить событие, которое будет срабатывать ТОЛЬКО, если элемент нажат?

Answer 1

Вы неправильно подключили проводник click, потому что вы не передали ссылку на свою функцию, но фактический результат.

В текущей форме ClickEvent выполняется каждый раз при анализе связывания, например. когда вы добавляете новый элемент в свой массив.

Чтобы исправить это вам нужно обернуть его в анонимную функцию

<td> 
    <span data-bind='text: $data.Name, click: function() { ClickEvent($data.Id) }'></span> 
</td> 

Или вы можете использовать bind function:

<td> 
    <span data-bind='text: $data.Name, click: ClickEvent.bind($data, $data.Id)'></span> 
</td> 

Смотрите также в документации: Accessing the event object, or passing more parameters