2

viewmodel.js ファイルで、テキスト ボックスに日付ピッカーをバインドしたいと考えています。

ここにコードがあります

define([
    'jquery',
    'durandal/app',
    'services/logger',
    'jqueryui'
    ],
function ($, app, logger, jqueryui) {
function activate() {
    if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker({
            dateFormat: 'mm/dd/yyyy'
        });
    }
    return true;
};
var vm = {
    activate: activate
};

return vm;
});

jquery と jqueryui が呼び出されないようです。コードの何が問題になっていますか? activate()このセクションまたは別の場所で jQuery および jQuery UI メソッドを開始する必要がありますか?

4

2 に答える 2

3

解決策が見つかりました。

関数の下にjQuery関連のステートメントを配置する必要がありviewAttachedます。

function viewAttached() {
    if (!Modernizr.inputtypes.date) {
        $('input[type=date]').datepicker();
    }
};
于 2013-03-06T21:27:50.230 に答える
2

あなたのアプローチは機能しますが、それはより良い方法ではありません。

より良い方法は、カスタム バインディングを作成することです ( http://knockoutjs.com/documentation/custom-bindings.html )。手動でバインディングを行いたくない場合は、jqueryui のバインディングを含むライブラリ (私は使用しないので、うまく機能するかどうかはわかりません) があります: http://gvas.github.com /knockout-jqueryui/index.html

とにかく、例のバインディングは次のようになります。

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $element = $(element),
            $btn = $("<button class='btn' type='button'><i class='icon-calendar'></i></button>");
        $element.datepicker(options);
        $element.prop("readonly", true);
        $element.wrap("<div class='input-append' />");
        $element.after($btn);

        $btn.click(function () {
            $element.datepicker("show");
        });

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor(),
                current = $(element).datepicker("getDate");
            observable(current);
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

そしてビューで：

<input type="text" id="yourid" data-bind="datepicker: yourobservable, datepickerOptions:{}" />
于 2013-03-07T11:35:16.607 に答える