如何在此自定義bindingHandler中監聽數據更改？

Question

我有一個自定義的bindingHandler，單擊時效果很好。它成功地改變了數據點..但它不是被更新時，另一UI控件更改數據

我的HTML看起來像這樣

<input type="checkbox" data-bind="checked: publisher.my_check"> Checkbox 
<div data-bind="slidebox: {label_on: 'ON', label_off: 'OFF', data: publisher.my_check }"></div> 

當點擊我的bindingHandler看起來像這樣

ko.bindingHandlers.slidebox = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 


     var el = $(element), 
      obj = valueAccessor(); 
     //add additional markup 
     el.append($('<div>')); 
     //set initial label 
     el.find('div').text(el.hasClass('checked') ? obj.label_on : obj.label_off); 
     //update the data point 
     obj.data(el.hasClass('checked')); 



     var updateHandler = function() { 
      console.log('i got clicked'); 
      var el = $(element), 
       obj = valueAccessor(); 
      el.toggleClass('checked').find('div').text(el.hasClass('checked') ? obj.label_on : obj.label_off); 
      obj.data(el.hasClass('checked'));  

     }; 
     ko.utils.registerEventHandler(element, "click", updateHandler); 

    }, 
    'update': function (element, valueAccessor) { 
     console.log('i got updated'); 
    } 
}; 

該div它更改數據點和複選框更新按預期..但是當點擊複選框，我看不到'我得到更新'控制檯消息

Answer 1

您需要實現更新功能。當綁定到data-bind屬性上的任何observable被更新時，這被調用。在這種情況下publisher.my_check

ko.bindingHandlers.slidebox = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     ... 
    }, 
    'update': function (element, valueAccessor) { 
     var config = valueAccessor(), 
      checked = ko.utils.unwrapObservable(config.data), 
      $element = $(element).toggleClass('checked', checked); 

     $element.find('div').text(checked ? config.label_on : config .label_off);   
    } 
}; 

編輯

下面是與工作代碼http://jsfiddle.net/madcapnmckay/xrBSQ/

希望這有助於小提琴。