Question

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

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

我没有看到我可以传递此数据的位置，因为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;

});

随意分叉，我正在接受拉取请求; - ）

将视图模式编辑/添加到durandaljs向导

1 个答案: