Нокаут привязки данных

Question

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

<div class='liveExample'> 
     <table > 
      <tr data-bind="foreach: items"> 
       <td data-bind="text:ID"></td> 
       <td data-bind="text:Title"></td> 
       <td data-bind="text:Body"></td> 
       <td data-bind="text:Expires"></td> 
       <!-- <td> <button data-bind="click: showModal(Title, Url)">Edit</button> </td>--> 
       <td><a data-bind="attr: { href: Url }">Edit</a></td> 
      </tr> 

     </table> 

    </div> 

ShowModal - стандартная функция JavaScript (SharePoint), не являющаяся частью модели просмотра.

Answer 1

При использовании связывания click вы связываетесь с функцией , которая будет вызываться при нажатии. Однако вы не предоставляете функцию для вызова вашей привязки, но вместо этого вместо этого вызывается функция. Вам нужно обернуть это в функцию, которая будет вызвана при нажатии.

Вам нужно сделать что-то вроде этого:

<div class='liveExample'> 
    <table > 
     <tr data-bind="foreach: items"> 
      <td data-bind="text:ID"></td> 
      <td data-bind="text:Title"></td> 
      <td data-bind="text:Body"></td> 
      <td data-bind="text:Expires"></td> 
      <td> 
       <button data-bind="click: function() { showModal(Title, Url); }">Edit</button> 
      </td> 
      <td> 
       <a data-bind="attr: { href: Url }">Edit</a> 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 2

Проблема с выше является то, что вы ставите код на ваш взгляд.

В некоторых случаях это хорошо работает. Однако, когда у вас есть дизайнеры, использующие ваш код и потенциально переупорядочивающие вещи и т. Д., Функции в представлении могут потеряться.

Предложить подобный подход:

<td data-bind="text:Expires"></td> 
<td> 
    <button data-bind="click: showModalEvent">Edit</button> 
</td> 

В ViewModel

showModalEvent : function(data, e) { 
    showModal(data.Title, data.Url); 
} 

Затем вы можете запустить статический анализ и т.д. легче на код, чтобы поймать правки ошибок и т.д., и сохранить свой вид просто и красиво ,