knockout.js - winjsdatepickerでknockoutjsデータバインディングを使用する方法

Question

次のコードを使用してDataPickerコントロールを作成しました。

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

ノックアウトを使用して、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