Pass a viewmode edit/add to the durandaljs wizard - durandal

Question

https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/masterDetail/wizard/index.js
When I look at this wizard I ask myself how can I pass a variable - like the mode being in an edit or add-mode for the wizard - to the index.js which creates step1, step2 and step3.
I do not see where I could pass this data because the index.js which is the main-wizard holding all steps is created by durandal dynamically.
So how can I pass data to the index.js so that I can decide wether I run the service.create() or service.edit() function to get different data etc...
UPDATE
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('startWizard').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());
};
The SchoolyearDialog module is in control which screen is shown. And the SchoolyearDialog has subscribed to the startWizard event. The startWizard event is fired by pressing the createWizard button. There is also an editWizard button which would fire another event like startWizardEdit. Either the activeScreen is set to the default module id: 'viewmodels/SchoolyearBrowser' or to
the module id: 'viewmodels/SchoolyearWizard' which loads the wizard
Is it possible somehow to pass the activeScreen property a value (viewMode) and retrieve it inside the wizard module holding the steps?

Answer 1

I've update the initial example slightly, so that it better fits this use case.
In index.js you'd have to create an instance of the wizard, which you then pass into the activeScreen observable (you can opt for an activator here as well if you need the full Durandal event lifecyle).
Take a look at http://dfiddle.github.io/dFiddle-2.0/#master-detail/wizard2 to see it in action.
Index.js
https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/masterDetail/wizard2/index.js
define(['durandal/activator', 'knockout', './wizard'], function( activator, ko, Wizard ) {
var ctor = function() {
this.activeScreen = ko.observable();
};
ctor.prototype.activate = function( wizId ) {
// Get wizard data based on wizId from the backend
var json =
{"id": "wizard001", "mode": "create", "steps": [
{"id": "s001", "name": "step one", "props": {"prop1": "a", "prop2": "b"}},
{"id": "s002", "name": "step twoe", "props": {"prop3": "a", "prop4": "b"}},
{"id": "s003", "name": "step three", "props": {"prop5": "a", "prop6": "b"}},
{"id": "s004", "name": "step four", "props": {"prop7": "a", "prop8": "b"}},
{"id": "s005", "name": "step five", "props": {"prop9": "a", "prop10": "b"}}
]};
this.activeScreen(new Wizard(json));
};
return ctor;
});
wizard.js
https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/masterDetail/wizard2/wizard.js
define(['durandal/activator', './step', 'knockout'], function( activator, Step, ko ) {
var ctor = function( options ) {
...
this.init(this._options);
this.stepsLength = ko.computed(function() {
return this.steps().length;
}, this);
this.hasPrevious = ko.computed(function() {
return this.step() > 0;
}, this);
this.hasNext = ko.computed(function() {
return (this.step() < this.stepsLength() - 1);
}, this);
};
...
ctor.prototype.init = function( options ) {
var json = options;
this.id(json.id);
this.mode(json.mode);
this.steps(createSteps(options.steps));
function createSteps ( steps ) {
var result = [];
$.each(steps, function( idx, obj ) {
result.push(new Step(obj));
});
return result;
}
this.activateStep();
};
return ctor;
});
step.js
https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/masterDetail/wizard2/step.js
define(['knockout'], function( ko ) {
var Property = function( id, val ) {
this.id = id,
this.val = ko.observable(val);
};
var ctor = function( options ) {
this._options = options || {};
this.id = ko.observable();
this.name = ko.observable();
this.props = ko.observableArray([]);
this.init(this._options)
};
ctor.prototype.init = function( options ) {
this.id(options.id || '');
this.name(options.name || '');
this.props(createProperties(options.props));
function createProperties (props) {
var result = [];
$.each(props, function( prop, val ) {
result.push(new Property(prop, val));
});
return result;
}
};
return ctor;
});
Feel free to fork and I'm taking pull requests ;-)