Knockout custom binding not update

Question

Пожалуйста, проверьте, что я делаю неправильно.

Часть обновления моего пользовательского обработчика привязки не выполняется, когда я создаю элемент управления в javascript. У меня есть функция Add, которая создает строку в таблице. Элементы управления, привязанные к пользовательской привязке, выполняют часть обновления, но не элементы управления, которые впоследствии добавляются.

HTML

<div id="collapse-programHead" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <table class="cv"> 
        <thead> 
         <tr> 
          <th>Programme</th> 
          <th>Core Module Count</th> 
          <th>Core SAQA Credit</th> 
          <th>Elective Module Count</th> 
          <th>Elective SAQA Credit</th> 
          <th>Credit</th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: ProgrammeHead"> 
         <!-- ko if: isActive --> 
         <tr> 
          <td><select data-bind="options: programmes, optionsText: 'Programme', value: ProgrammeID, optionsValue:'ProgrammeID', optionsCaption:''"></select></td> 
          <td><input type="text" readonly="true" data-bind="value:ModuleCount, offeringCount:$root.programmeOfferingCount"/></td> 

          <td><input type="text"/></td> 
          <td><input type="text"/></td> 
          <td><input type="text"/></td> 
          <td><input type="text" data-bind="value: Credit"/></td> 
          <td class="tinyTD"><a class="removeRow" id="ProgrammeHead" title="Delete item" href="javascript:void(0)"></a></td> 
          <td class="hideTD"><input type="hidden" data-bind="value: CVId" /></td> 
          <td class="hideTD"><input type="hidden" data-bind="value: ProgrammeID" /></td> 
          <td class="hideTD"><input type="hidden" data-bind="value: ProgrammeOfferingID" /></td> 
          <td class="hideTD"><input type="hidden" data-bind="value: ManagementLoadID" /></td> 
         </tr> 
         <!-- /ko --> 
        </tbody> 
       </table> 
       <a title="Add row" id="a2" href="javascript:void(0)" data-bind="click: addRow.bind($data, 'programHead')"><label>Add row</label></a> 
      </div> 
     </div> 

ko.bandingHandler

ko.bindingHandlers.offeringCount = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      return { controlsDescendantBindings: true }; 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var value = ko.unwrap(valueAccessor) 
      var id = ko.unwrap(bindingContext.$data.ProgrammeID); 

      var item = programmes().filter(function (i) { 
       return i.ProgrammeID() == id; 
      }) 
      if (item.length > 0) { 
       var count = ko.unwrap(item[0].ProgrammeOfferingCount); 
       bindingContext.$data.ModuleCount(count); 
      } 
     } 
    }; 

ProgrammeHead Добавить

self.ProgrammeHead.push({ 'ManagementLoadID': '', 'CVId': '', 'ModuleCount': count, 'ProgrammeID': '', 'ProgrammeOfferingID': '', 'Credit': '', 'isActive': active }); 

Answer 1

Параметр valueAccessor это функция, которая возвращает значение связанное. Если связанное значение является наблюдаемым, то вы также должны «развернуть» наблюдаемое, чтобы получить реальное значение. В вашем коде вы не разворачивали значение правильно. Оно должно быть:

var value = ko.unwrap(valueAccessor()); 

Содержание update функции действуют как тело ko.computed и так работает так же, как computed dependency tracking:

Так, Нокаут не только обнаружить зависимостей в первый раз оценщик работает - он переделывает их каждый раз. Это означает, например, что зависимости могут варьироваться динамически: зависимость A может определять, зависит ли вычисляемое наблюдаемое значение от B или C. Затем оно будет только повторно оценено при изменении A или вашего текущего выбора B или C. Вам не нужно объявлять зависимости: они определяются во время выполнения из исполнения кода.