.datepicker вызов внутри функции активирования Durandal не работает

Я сочиняю это в представлении, а затем пытаюсь вызвать .datepicker() для результата, но ничего не происходит.

Контейнер компоновки

<div>
<!--ko compose: { model:'viewmodels/schedule', view: 'views/schedule.html', activate:true} -->
<!--/ko-->
</div>

schedule.html

<div class="schedule-editor">

</div>

И модуль расписания

define([], function () {
    var vm = {
        activate: activate,
    };
    return vm;

    function activate() {
        $('.schedule-editor').datepicker();
        console.log("activated schedule module");
        return true;
    }
});

Журналы консоли "активированный модуль расписания", но датапикер не создан. Если я иду на консоль хром и запускаю вызов jQuery, $('.schedule-editor').datepicker(); он отлично подходит для datepicker.

Документы Durandal утверждают, что функция активации вызывается после полного заполнения DOM, поэтому я не знаю, что еще попробовать.

Ответ 1

Как упоминалось выше, вам следует использовать viewAttached.

define([], function () {
    var vm = {
        viewAttached: viewAttached,
    };
    return vm;

    function viewAttached(view) {
        $(view).find('.schedule-editor').datepicker();
        console.log("activated schedule module");
        return true;
    }
});

Активация происходит в жизненном цикле до того, как ваша модель привязана к данным для нового представления и до того, как представление будет добавлено в dom. viewAttached происходит после того, как представление привязано к вашей модели данных и привязано к dom.

ИЗМЕНИТЬ

Durandal 2.0 переименовал viewAttached в attached

Ответ 2

Существует еще один подход к этому, который остается верным декларативной философии пользовательского интерфейса, к которой стремятся knockout.js и durandal.

Это позволит вам объявить datepicker внутри HTML следующим образом:

<div class="schedule-editor" data-bind="
    jqueryui: { 
        widget: 'datepicker', 
        options: { 
            // you can set options here as per the jquery ui datepicker docs
        } 
    }">

</div>

Просто добавьте привязки виджета jquery ui, найденные в этом контексте: https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

Убедитесь, что вы включили указанный выше javascript после загрузки jquery, jquery ui и нокаута.