为什么在durandaljs中没有调用compositionComplete事件

时间:2013-09-11 20:54:54

标签: javascript durandal

这是我的示例项目(8,3 MB)Visual Studio 2012解决方案:

sample project zipped

我的问题:

模块 step2 ,并且不调用其compositionComplete事件! 模块 step1 是,同样的事件工作正常!

这样你就可以重现这个问题:

1。)启动应用

2。)点击“浏览schoolyears”按钮

3。)点击“创建”按钮(打开SchoolyearWizard)

4.。)向导step1可见,其compositionComplete事件被称为

5.)点击“下一步”按钮

6。)向导step2可见,其compositionComplete事件未被调用

我在这里只发布了重要内容,这些是5个模块。

  • SchoolyearDialog模块由SchoolyearBrowser和SchoolyearWizard模块组成。两个模块都使用'compose:activeScreen'绑定进行切换。
  • 当加载SchoolyearWizard并且用户点击下一步按钮加载step2时,问题就在于上面的编号6.)。

SchoolyearDialog

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('activateStep1').then(function (obj) {
            self.activeScreen(obj.moduleId);
        });

        app.on('activateStep2').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());
    };   

    return SchoolyearDialog;
});

SchoolyearBrowser

define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router', 'moment'],
    function (app, dialog, ko, dataservice, router, moment) {
        var SchoolyearBrowser = function () {
            var self = this;

            self.create = function () {
                app.trigger('activateStep1', {
                    moduleId: 'viewmodels/SchoolyearWizard',
                    viewMode: 'create'
                });
            }

            self.open = function () {
                // do not open the wizard
            }

            self.compositionComplete = function (view) {
                debugger;
            }
        };
        return SchoolyearBrowser;
    });

SchoolyearWizard

define(['durandal/activator', 'viewmodels/step1', 'viewmodels/step2', 'knockout', 'plugins/dialog','durandal/app'], function (activator, Step1, Step2, ko, dialog, app) {

    var steps = [new Step1(), new Step2()];
    var step = ko.observable(0);   // Start with first step

    var activeStep = activator.create();

    var stepsLength = steps.length;

    var hasPrevious = ko.computed(function () {
        return step() > 0;
    });

    var caption = ko.computed(function () {

        if (step() === stepsLength - 1) {            
            return 'save';
        }
        else if (step() < stepsLength) {
            return 'next';
        }
    });

    activeStep(steps[step()]);

    var hasNext = ko.computed(function () {
        if ((step() === stepsLength - 1) && activeStep().isValid()) {
            // save
            return true;
        } else if ((step() < stepsLength - 1) && activeStep().isValid()) {

            return true;
        }
    });

    return {
        showCodeUrl: true,
        steps: steps,
        step: step,
        activeStep: activeStep,
        next: next,
        caption: caption,
        previous: previous,
        hasPrevious: hasPrevious,
        hasNext: hasNext
    };

    function isLastStep() {
        return step() === stepsLength - 1;
    }

    function next() {

        if (isLastStep()) {

            // Corrects the button caption when the user re-visits the wizard
            step(step() - 1);
            // Resets the wizard init page to the first step when the user re-visits the wizard
            activeStep(steps[0]); 
            debugger;
            // save;

        }
        else if (step() < stepsLength) {
            step(step() + 1);
            activeStep(steps[step()]);
            debugger;
            //app.trigger('activateStep2', {
            //    moduleId: 'viewmodels/step2'
            //});
        }
    }

    function previous() {
        if (step() > 0) {
            step(step() - 1);
            activeStep(steps[step()]);
        }
    }
});

步骤1

define(function () {
    return function () {
        var self = this;

        self.isValid = function () {
            return true;
        }
        self.name = 'step1';

        self.compositionComplete = function (view) {
            debugger;            
        }
    };
});

第二步

define(function () {
    return function () {

        this.isValid = function () {
            return true;
        }
        this.name = 'step2';

        self.compositionComplete = function (view) {

           // I never get here WHY ???            
        }
    };
});

1 个答案:

答案 0 :(得分:4)

在您的第2步中,您没有self.compositionCompleted事件,因为您没有上下文'self'

您需要声明self = this;

var self =this;
self.name = whatever;
self.compositionComplete