Knockout.js 如何与winjs datepicker一起使用knockoutjs数据绑定

我使用以下代码创建了一个DataPicker控件

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

---

我想使用knockout绑定到从WinJS生成的3个选择列表。有没有一种方法可以使用敲除声明性数据绑定来绑定到生成的选择列表

我可能会考虑定制绑定。您可能仍然可以对日期选择器使用声明性标记，但在自定义绑定中实例化日期选择器可能更容易

注意：我还没有机会测试这个，但它可能会为您指出正确的方向。此外，我认为在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" />

ko.bindingHandlers.winDatePicker={
init：函数（元素、值访问器）{
var currentDate=valueAccessor（）| |{}；
//为了实现这一点，您必须调用WinJS.UI.processAll（）和*ko.applyBindings（）
if（元件winControl）{
element.winControl.current=当前日期；
}
},
更新：函数（元素、值访问器）{
var currentDate=valueAccessor（）| |{}；
if（元件winControl）{
element.winControl.current=当前日期；
}
}
};
/// 

你可以看看我的要点。但是没有担保！在使用此选项之前，您需要调用

WinJS.Binding.processAll

：

​
​

---

您是想使用knockout来设置选择器显示的日期，还是想使用binding来实际填充选择的内容？两个完全不同的答案。@ChrisTavares我正在尝试绑定选择器显示的日期。

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