如何使用自定义绑定？

Question

我有一个大的ViewModel，我想向服务器发布状态（“读”/“未读”）的更新，而无需发布整个模型。

我所做的就是创建一个自定义绑定：

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>

对于自定义绑定，我只对更新感兴趣，我认为允许我执行的操作是检测使用QuintOutJS的更新，并确定已更新的项目，以便我可以获取该项目ID和新统计信息，然后发布发布到服务器。

正在发生的是自定义订阅是 console.log在单个复选框修改上盖上每个复选框。这意味着我更改了复选框，所有3个复选框都通过 ko.bindingHandlers.statusUpdater.

我考虑过将点击事件添加到数据结合中，但似乎并不像自定义绑定那样干净。也许我想处理的是自定义绑定的方法？

想法？

Answer 1

之所以这样做是因为每次更新模型值的时间和调用Init方法之后的开始时，都会调用更新方法。

更新绑定方法是为您设置界限元素的状态时，当ViewModel更改时。

如果您想对更改做出反应并更新ViewModel，则需要在此处理程序中实现INIT方法并将事件（单击，更改等）附加起来，然后可以将状态更新发送到您的ViewModel。

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);
    }
};

我发现的最好的学习方法是查看GIT上的Debug版本。您要实现的目标基本上是使用AJAX调用的修改后的检查绑定。

我尚未测试上述测试，但应该让您入门。

干杯，

伊恩