在继续使用Marionette Application下一阶段之前等待用户输入

时间:2013-09-25 04:24:00

标签: backbone.js marionette

我的应用程序需要在初始化时调用函数:在阶段之后。用户在功能中提供了该输入后,我希望应用程序进入启动阶段。但目前,它只是在没有等待输入的情况下进入所有3个阶段。任何人都可以建议我如何实现我想要的功能?

var app= new Marionette.Application();

    app.on('initialize:before', function(options){
        //do Something
    });

    app.on('initialize:after', function(options){
        //do Something
                //wait for User to give input before continuing to start stage.
    });

    app.on('start', function(options){
        //start only when User provide input.
                //do Something with input.
    });

    var options = {};

    app.start(options);

1 个答案:

答案 0 :(得分:0)

这不是一个Backbone / Marionette问题,而是一个纯粹的JavaScript问题。如果您不关心可用性,只需使用window.prompt并为自己节省大量工作。

如果您无法使用alert,那么事情会变得更加复杂。用户输入通常使用某种形式完成。不幸的是,这些都是异步操作,这意味着你不能在等待用户拿出眼镜并寻找他们的SSN时暂停JavaScript执行。 jQuery's Deferred library是用于处理这类情况的好工具,但您需要稍微修改一下代码。

在我们的项目中,我们创建了Lifecycle的概念,大致如下:

Module.lifecycle = {
    step1: function() {
        var dfd = new $.Deferred().resolve();
        // get user input from a custom dialog control
        var dialog = new MyDailogControl("What do you want to do?");
        dialog.onSuccess = dfd.resolve;
        dialog.onFail = dfd.reject;
        dialog.show();
        return dfd.promise();
    },
    step2: function() { /* load some data from the server */ },
    step3: function() { /* get even more user input... */ },
};

接下来,我们有一个Lifecycle Walker对象,可以推动每个州的生命周期;它看起来像这样(从记忆中;你要测试这个...)

var Walker = function(lifecycle) {
    this.lifecycle = lifecycle;
    this._states = _.keys(this.lifecycle);
}

_.extend(Walker.prototype, Backbone.Events, {
    start: function() {
        this._index = 0;
        this.moveNext();
    },
    moveNext: function() {
        var step = this.states[this._index];

        this.trigger('before:' + step);

        $.when(this.lifecycle[step]())
            .then(function() {
                this.trigger('after:' + step);
                this._index++;
                if (this._active < this._states.length) {
                    this.moveNext();
                }
            });
    }
});

将两个想法结合在一起,你会做类似的事情:

var walker = new Walker(MyModule.lifecycle);
walker.on('before:step1', function() { /* do something amazing */ });
walker.on('before:step2', function() { /* do something fantastic */ });
walker.on('after:step3', function() { /* do whatever */ });

walker.start();

所以,我们基本上使用延迟实现了一个卑鄙的命令模式来解决这样的问题。我们勾选module.start,但没有理由你不能在app.start上做类似的事情。