Why is the compositionComplete event not called in durandaljs

Why is the compositionComplete event not called in durandaljs

Thats my sample project (8,3 MB) Visual Studio 2012 solution:
sample project zipped
My problem:
module step2 and its compositionComplete event is NOT called! module step1
is and the same event works fine!
This way you can reproduce the problem:
1.) start app
2.) click the 'Browse schoolyears' button
3.) click the 'create' button
4.) Wizard step1 is visible and its compositionComplete event is called
5.) click the 'next' button
6.) Wizard step2 is visible and its compositionComplete event is NOT called
I am posting here the important stuff only and these are 5 modules.
The SchoolyearDialog module is composed of the SchoolyearBrowser and
SchoolyearWizard module. Both modules are switched with the 'compose:
activeScreen' binding.
When the SchoolyearWizard is loaded and the user clicked the next step
button to load step2 then here is the problem see number 6.) above.
SchoolyearDialog
define(['durandal/app','plugins/dialog', 'knockout',
'services/dataservice', 'plugins/router', 'moment'], function (app,
dialog, ko, dataservice, router, moment) {
var SchoolyearDialog = function () {
var self = this;
self.activeScreen = ko.observable('viewmodels/SchoolyearBrowser');
// set the schoolyear browser as default module
app.on('activateStep1').then(function (obj) {
self.activeScreen(obj.moduleId);
});
app.on('activateStep2').then(function (obj) {
self.activeScreen(obj.moduleId);
});
app.on('dialog:close').then(function (options) {
dialog.close(self, options );
});
self.closeDialog = function () {
dialog.close(self, { isSuccess: false });
}
}
SchoolyearDialog.show = function () {
return dialog.show(new SchoolyearDialog());
};
return SchoolyearDialog;
});
SchoolyearBrowser
define(['durandal/app', 'plugins/dialog', 'knockout',
'services/dataservice', 'plugins/router', 'moment'],
function (app, dialog, ko, dataservice, router, moment) {
var SchoolyearBrowser = function () {
var self = this;
self.create = function () {
app.trigger('activateStep1', {
moduleId: 'viewmodels/SchoolyearWizard',
viewMode: 'create'
});
}
self.open = function () {
// do not open the wizard
}
self.compositionComplete = function (view) {
debugger;
}
};
return SchoolyearBrowser;
});
SchoolyearWizard
define(['durandal/activator', 'viewmodels/step1', 'viewmodels/step2',
'knockout', 'plugins/dialog','durandal/app'], function (activator, Step1,
Step2, ko, dialog, app) {
var steps = [new Step1(), new Step2()];
var step = ko.observable(0); // Start with first step
var activeStep = activator.create();
var stepsLength = steps.length;
var hasPrevious = ko.computed(function () {
return step() > 0;
});
var caption = ko.computed(function () {
if (step() === stepsLength - 1) {
return 'save';
}
else if (step() < stepsLength) {
return 'next';
}
});
activeStep(steps[step()]);
var hasNext = ko.computed(function () {
if ((step() === stepsLength - 1) && activeStep().isValid()) {
// save
return true;
} else if ((step() < stepsLength - 1) && activeStep().isValid()) {
return true;
}
});
return {
showCodeUrl: true,
steps: steps,
step: step,
activeStep: activeStep,
next: next,
caption: caption,
previous: previous,
hasPrevious: hasPrevious,
hasNext: hasNext
};
function isLastStep() {
return step() === stepsLength - 1;
}
function next() {
if (isLastStep()) {
// Corrects the button caption when the user re-visits the wizard
step(step() - 1);
// Resets the wizard init page to the first step when the user
re-visits the wizard
activeStep(steps[0]);
debugger;
// save;
}
else if (step() < stepsLength) {
step(step() + 1);
activeStep(steps[step()]);
debugger;
//app.trigger('activateStep2', {
// moduleId: 'viewmodels/step2'
//});
}
}
function previous() {
if (step() > 0) {
step(step() - 1);
activeStep(steps[step()]);
}
}
});
Step1
define(function () {
return function () {
var self = this;
self.isValid = function () {
return true;
}
self.name = 'step1';
self.compositionComplete = function (view) {
debugger;
}
};
});
Step2
define(function () {
return function () {
this.isValid = function () {
return true;
}
this.name = 'step2';
self.compositionComplete = function (view) {
// I never get here WHY ???
}
};
});