0

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 イベントが発生します。startWizardEdit などの別のイベントを起動する editWizard ボタンもあります。activeScreen は、デフォルトのモジュール ID に設定されます: 'viewmodels/SchoolyearBrowser' またはモジュール ID: 'viewmodels/SchoolyearWizard' に設定され、ウィザードが読み込まれます。

activeScreen プロパティに値 (viewMode) を渡し、ステップを保持するウィザード モジュール内でそれを取得することは可能ですか?

4

1 に答える 1

1

最初の例を少し更新して、このユース ケースにより適したものにしました。index.jsウィザードのインスタンスを作成し、それをオブザーバブルに渡す必要activeScreenがあります (完全なデュランダル イベント ライフサイクルが必要な場合は、ここでアクティベーターを選択することもできます)。

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;

});

お気軽にフォークしてください。プル リクエストを受け付けています ;-)

于 2013-09-17T18:11:03.767 に答える