Когда я должен вызывать функции оформления jQueryUI в DurandalJS?

В файле 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 никогда не вызываются. Что не так с моим кодом? Должен ли я запускать методы jQuery и jQuery UI в разделе activate() или где-то еще?


jquery jquery-ui durandal
person Blaise    schedule 06.03.2013    source источник
comment
stackoverflow.com/questions/15140840 /   -  person amir-yeketaz    schedule 07.03.2013
comment
Не лучший ответ. Буду ждать лучшего решения. Но все равно спасибо.   -  person Blaise    schedule 07.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Хотя ваш подход сработает, это не лучший способ сделать это.

Лучшим подходом является создание пользовательской привязки ( 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:{}" />
person Julián Yuste    schedule 07.03.2013
comment
Спасибо за отзыв. Но куда мне поместить это утверждение ko.bindingHandlers.datepicker? В function activate()? - person Blaise; 07.03.2013
comment
Самый простой способ — поместить его в файл javascript и включить в пакет скриптов после включения для нокаута. - person Julián Yuste; 07.03.2013
comment
Тогда почему вы считаете, что это лучшее решение? По крайней мере, код более утомительный. Предлагает ли он повышение производительности или что-то в этом роде? - person Blaise; 07.03.2013
comment
Поскольку он обеспечивает разделение между представлением и моделью представления, он делает ваш код повторно используемым, и, как вы можете прочитать здесь, это правильный путь: github.com/BlueSpire/Durandal/issues/74#issuecomment-14291074 - person Julián Yuste; 07.03.2013

arrow_upward
3
arrow_downward

Решение найдено.

Я должен поместить оператор, связанный с jQuery, в функцию viewAttached.

function viewAttached() {
    if (!Modernizr.inputtypes.date) {
        $('input[type=date]').datepicker();
    }
};
person Blaise    schedule 06.03.2013
comment
Мне интересно узнать, как вы теперь относитесь к этому решению, примерно 18 месяцев назад. viewAttached — это событие, которое, хотя и удобно, поддается чрезмерному использованию и тесно связывает ваше представление и модель представления друг с другом. Решение обработчика привязки, как правило, более широко распространено. Как это обернулось для вас? - person Brandon Wittwer; 14.02.2015