将视图模式编辑/添加传递给 durandaljs 向导

Question

https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/masterDetail/wizard/index.js

当我查看此向导时，我问自己如何将变量（例如处于向导的编辑或添加模式中的模式）传递给创建 step1、step2 和 step3 的 index.js。

我看不到我可以在哪里传递这些数据，因为 index.js 是保存所有步骤的主向导，它是由 durandal 动态创建的。

那么如何将数据传递给 index.js，以便我可以决定是运行 service.create() 还是 service.edit() 函数来获取不同的数据等...

更新

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' 加载向导

是否有可能以某种方式向 activeScreen 属性传递一个值 (viewMode) 并在保存步骤的向导模块中检索它？

Answer 1

我稍微更新了初始示例，使其更适合此用例。 在 index.js 中，您必须创建向导的实例，然后将其传递给 activeScreen 可观察对象（如果您需要完整的 Durandal 事件生命周期，也可以在此处选择激活器）。

看看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;

});

随意分叉，我正在接受拉取请求；-)