Knockout DatePicker綁定項不禁用DatePicker

Question

我有一個自定義knockoutJs綁定的日期選擇器。

ko.bindingHandlers.valueAsDatePicker = {...} 

當綁定輸入字段的狀態（使能/禁止）被綁定到一個可觀察到的KO它不啓用/禁用日期選擇器圖標。

HTML

<input id="txtRequestedTo" type="text" placeholder="dd/mm/yyyy" 
data-bind="valueAsDatePicker: reqDateTo, disable: reqDateFrom().length < 1" /> 

自定義綁定

ko.bindingHandlers.valueAsDatePicker = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor); 
     formatAndSetDateValue(element, valueAccessor, allBindingsAccessor); 

     // Init UI datepicker 
     var dateFormat = allBindingsAccessor.dateFormat 

     $(element).datepicker({ 
      dateFormat: dateFormat, 
      changeMonth: true, 
      changeYear: true, 
      yearRange: '1900:' + new Date().getFullYear(), 
      maxDate: 0, 
      showOn: "button", 
      buttonImage: "Content/images/sprite-base/sprite/icon-calender.png", 
      buttonImageOnly: true, 
      constrainInput: false, 
      buttonText: ""   
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor) { 
     // Use the value binding 
     ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor); 
     formatAndSetDateValue(element, valueAccessor, allBindingsAccessor); 

     valueAccessor().valueHasMutated(); 
    } 
}; 

我想如果元素被禁用，反之亦然要禁用的日期選擇器。

Answer 1

萬分感謝羅伯特，

這是有效的解決方案。

使用KnockOutJS V3.1

init: function (element, valueAccessor, allBindings) { 
... 

//Disable the datepicker if the item is disabled or enabled. 
    if (allBindings.has('disable')) { 
     if (allBindings.get('disable')()) { 
      $(element).datepicker('disable'); 
     } 
     else { 
      $(element).datepicker('enable'); 
     } 
     var subscription = allBindings.get('disable').subscribe(function (newValue) { 
      if (newValue) { 
       $(element).datepicker('disable'); 
      } else { 
       $(element).datepicker('enable'); 
      } 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      subscription.dispose(); 
     }); 
    } 
} 

你必須使用

if (allBindings.has('disable')) { 

否則

allBindings.get('disable') 

將是不確定的，因爲並非所有日期選擇器視圖中的綁定字段具有disabled屬性。

Answer 2

這裏的技巧是將禁用的綁定作爲可觀察對象訪問，以便您可以附加手動訂閱。此時禁用表達式的結果被傳遞給bindingHandler（通過allBindingAccessor）。

一個你的訂閱，你可以調用的DatePicker的禁用選項

HTML

<input id="txtRequestedTo" type="text" placeholder="dd/mm/yyyy" 
    data-bind="valueAsDatePicker: reqDateTo, disable: reqDateFrom.disabled" /> 

JAVASCRIPT

var reqDateFrom = ko.observable(); 
var reqDateTo = ko.observable(); 
reqDateTo.disabled = ko.computed(function() { 
    return (reqDateFrom() || '').length === 0; 
}); 


ko.bindingHandlers.valueAsDatePicker { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     .... 
     // ko 3.0 syntax. For 2.x use allBindingAccessor['disable'] 
     var subscription = allBindingAccessor.get('disable').subscribe(function(newValue) { 
      $(element).datepicker('option', 'disabled', newValue); 
     }); 

     // Make sure the subscription is disposed when the element is torn down 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      subscription.dispose(); 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor) { 
    } 
}