如何使用基於winjs的knockoutjs數據綁定datepicker

Question

我使用下面的代碼創建了一個DataPicker控件。

<div id="date" data-win-control="WinJS.UI.DatePicker"></div> 

我想用knockout來綁定到從WinJS生成的3個選擇列表。有沒有辦法使用敲除聲明性數據綁定來綁定到生成的選擇列表？

Answer 1

ko.bindingHandlers['winjsDatePicker'] = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), 
      allBindings = allBindingsAccessor(), 
      options = allBindings['winjsDatePickerOptions'] || {}; 
     options['current'] = value; 

     // Flatten the options for DatePicker 
     var dpOptions = {}; 
     ko.utils.arrayForEach([ 
      'calendar', 'current', 'datePattern', 'disabled', 'element', 
      'maxYear', 'minYear', 'monthPattern', 'yearPattern' 
     ], function (prop) { 
      if (options.hasOwnProperty(prop)) { 
       dpOptions[prop] = ko.utils.unwrapObservable(options[prop]); 
      } 
     }); 

     // Use jQuery to store the value-observable with the element 
     $(element).data('winjsDatePickerCurrent', value); 

     // Create the DatePicker, and pass it the options 
     var dp = new WinJS.UI.DatePicker(element, dpOptions); 

     // Wire up the onchange event 
     dp.addEventListener("change", function() { 
      var value = $(element).data('winjsDatePickerCurrent'); 
      if (ko.isWriteableObservable(value)) { 
       value(dp.current); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var dp = element.winControl, 
      value = valueAccessor(), 
      allBindings = allBindingsAccessor(), 
      options = allBindings['winjsDatePickerOptions'] || {}; 
     options['current'] = value; 

     // Update the value-observable 
     $(element).data('winjsDatePickerCurrent', value); 

     // Update any properties 
     ko.utils.arrayForEach([ 
      'calendar', 'current', 'datePattern', 'disabled', 'element', 
      'maxYear', 'minYear', 'monthPattern', 'yearPattern' 
     ], function (prop) { 
      if (options[prop] !== undefined) { 
       dp[prop] = ko.utils.unwrapObservable(options[prop]); 
      } 
     }); 
    } 
}; 

<div data-bind="winjsDatePicker: date"></div>​ 
<div data-bind="winjsDatePicker: date, winjsDatePickerOptions: { minYear: 2012 }"></div>​ 

http://jsfiddle.net/MizardX/rs8Cd/

Answer 2

我可能會看看自定義綁定。您仍然可能使用DatePicker的聲明標記，但在自定義綁定中實例化DatePicker可能更容易。

注意：我沒有機會對此進行測試，但它可能會指向正確的方向。另外，我認爲在WinJS世界中，他們更喜歡你做data-win-bind="winControl.current: yourprop"，但是如果你想使用KO，可能有一種方法。

ko.bindingHandlers.winDatePicker = { 
    init: function (element, valueAccessor) { 
     var currentDate = valueAccessor() || {}; 

     // In order for this to be true, you would had to call WinJS.UI.processAll() and *then* ko.applyBindings() 
     if (element.winControl) { 
      element.winControl.current = currentDate; 
     } 

    }, 
    update: function (element, valueAccessor) { 
     var currentDate = valueAccessor() || {}; 

     if (element.winControl) { 
      element.winControl.current = currentDate; 
     } 
    } 
}; 

/// <div data-bind="winDatePicker: myObservable" data-win-control="WinJS.UI.DatePicker" /> 

你可以看看我做的這個要點。雖然沒有保證！你需要使用此之前調用WinJS.Binding.processAll：https://gist.github.com/4183235