.datepicker call inside of Durandal activate function not working

durandal, javascript, jquery

Solution

Like nemesv mentioned you should use viewAttached instead.

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

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

Activate happens in the lifecycle before your model has been data-bound to the new view and before the view has been added to the dom. viewAttached happens after the view has been data-bound to your model and attached to the dom.

EDIT

Durandal 2.0 has renamed `viewAttached` to `attached`

Problem

I'm Composing this in a view, then trying to call .datepicker() on the result, but nothing happens. The compose container ``` <div> <!--ko compose: { model:'viewmodels/schedule', view: 'views/schedule.html', activate:true} --> <!--/ko--> </div> ``` schedule.html ``` <div class="schedule-editor"> </div> ``` And the schedule module ``` define([], function () { var vm = { activate: activate, }; return vm; function activate() { $('.schedule-editor').datepicker(); console.log("activated schedule module"); return true; } }); ``` Console logs "activated schedule module", but the datepicker is not created. If I go to the chrome console and run the jQuery call, `$('.schedule-editor').datepicker();` it brings up the datepicker just fine. The Durandal docs claim that the activate function is called after the DOM is full composed, so I don't know what else to try.

Original source