将视图模式编辑/添加到durandaljs向导 [英] Pass a viewmode edit/add to the durandaljs wizard
问题描述
当我看着这个向导时，我问我自己如何将变量（如向导处于编辑模式或添加模式）传递给index.js，该变量将创建step1，step2和step3。
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.
我看不到我可以在哪里传递这些数据，因为保留所有步骤的主要向导index.js是由durandal动态创建的。
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.
那我该怎么办？将数据传递给index.js，以便我可以决定是否运行service.create（）或service.edit（）函数以获取其他数据，等等。
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...
更新
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());
};
SchoolyearDialog模块可以控制显示哪个屏幕。并且SchoolyearDialog已订阅了startWizard事件。按下createWizard按钮会触发startWizard事件。还有一个editWizard按钮，它将触发另一个事件，如startWizardEdit。将activeScreen设置为默认模块ID： viewmodels / SchoolyearBrowser，或者将模块ID： viewmodels / SchoolyearWizard设置为
，以加载向导
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
推荐答案
是否可以通过某种方式为activeScreen属性传递值（viewMode）并在向导模块中检索它？我已经稍微更新了初始示例，以使其更适合此用例。
在 index.js 中，您必须创建向导的实例，然后将其传递到 activeScreen 可观察到的（如果需要完整的Durandal事件生命周期，也可以在此处选择激活器。）
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).
看看 http://dfiddle.github.io/dFiddle-2.0/#master-detail/wizard2 到
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 ;-)
这篇关于将视图模式编辑/添加到durandaljs向导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
