Как использовать пользовательские привязки?

Question

У меня есть большой viewModel, и я хотел бы опубликовать обновление статуса («читать»/«непрочитанное») на сервере без публикации всей модели.

Что я сделал, это создать Выборочная Binding так:

ko.bindingHandlers.statusUpdater = { 
    update: function(element, valueAccessor) { 
     console.log(element); 
    } 
}; 

В шаблоне:

<div data-bind='template: { name: "contactsListTemplate", data: viewModel.conversations.conversationlist }'> </div> 

<script type="text/html" id="contactsListTemplate"> 
<table> 
    <tbody> 
    {{each(i, conversation) $data}} 
    <tr> 
    <td> 
     <input type="checkbox" data-bind="checked: read, statusUpdater: conversation_id" /> 
    </td> 
    </tr> 
    {{/each}} 
    </tbody> 
</table> 
</script> 

Для пользовательского связывания, я заинтересован только в обновлениях, что я подумал, что это позволит мне обнаружить обновление с помощью KnockoutJS и определить, какой элемент был обновлен, чтобы я мог захватить этот идентификатор элементов и новую статистику, а затем отправить его на сервер.

Что такое customBinding console.log ging each one checkbox при одной модификации флажка. Это означает, что я меняю флажок, и все 3 флажка регистрируются на консоли через ko.bindingHandlers.statusUpdater.

Я думал о добавлении события кликов к привязке данных, но это выглядело не так просто, как пользовательская привязка. Возможно, то, что я пытаюсь сделать с пользовательскими привязками, не для чего они предназначены?

Мысли?

Answer 1

Причина, по которой это делается потому, что метод обновления вызывается каждый раз, когда обновляется значение модели, и в начале после вызова метода init.

Метод привязки обновления предназначен для установки состояния связанного элемента dom при изменении модели представления.

Если вы хотите отреагировать на изменение и обновить viewModel, вам необходимо реализовать метод init и прикрепить событие (щелкнуть, изменить и т. Д.). В этом обработчике вы можете отправить обновление статуса в свою модель просмотра.

ko.bindingHandlers.statusUpdater = { 
    'init': function (element, valueAccessor, allBindingsAccessor) { 

     var updateHandler = function() {    
      var valueToWrite; 
      if (element.type == "checkbox") { 
       valueToWrite = element.checked; 
      } else if ((element.type == "radio") && (element.checked)) { 
       valueToWrite = element.value; 
      } else { 
       return; // "checked" binding only responds to checkboxes and selected radio buttons 
      } 

      var modelValue = valueAccessor(); 

      if (ko.isWriteableObservable(modelValue)) {    
       if (modelValue() !== valueToWrite) { // Suppress repeated events when there's nothing new to notify (some browsers raise them) 
        $.ajax({ 
         url: 'someurl', 
         success: function(data) { 
          alert('status update'); 
         } 
        }); 
        modelValue(valueToWrite); 
       } 
      } else { 
       var allBindings = allBindingsAccessor(); 
       if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['checked']) { 
        allBindings['_ko_property_writers']['checked'](valueToWrite); 
       } 
      } 
     }; 

     $(element).click(updateHandler).change(updateHandler); 
    }, 
    'update': function (element, valueAccessor) { 
     ko.bindingHandlers.checked(element, valueAccessor); 
    } 
}; 

Лучший способ узнать это, я нашел, это посмотреть на отладочную версию KO на git. То, что вы хотите достичь, - это в основном модифицированное проверочное связывание с вызовом ajax.

Я не тестировал выше, но он должен вас начать.

Приветствие,

Ian