javascript - 在 Ember 1.x 中，如何在 willTransition() 中使用模态

Question

当有人尝试离开表单不完整的页面时，我尝试打开模式对话框。我已经构建了模式模板，但我不知道如何实现它。这是我所拥有的:

actions: {
    willTransition: function( transition ){
        var model = this.currentModel;

        if( model.get( 'isDirty' ) ){
            this.render( 'my-modal', {
                into: 'application',
                outlet: 'modal'
        } );
            if(!this.get(abortConfirmed) {
                transition.abort();
            } else {
               model.rollback();
            }
        }
    }
}

注意:脏检查有效，我可以生成提示，但这个模式不起作用

Answer 1

这是我使用的工作流程。

1).在 willTransition(transition) Hook 中，检查是否应该显示模式。

2).如果您应该显示模态(在您的情况下，当模型 isDirty 时)，请调用 transition.abort()。您必须执行此操作以防止发生转换。不过，您还需要 Controller 上的第二个属性来确定转换是否已被授权。所以真的，你检查 model.get('isDirty) && this.controller.get('transitionAuthorized')

3).您需要一种方法将状态传递给模态框，或者使模态框能够与创建该模态框的页面进行通信。我个人将一个 continueFn 和一个 cancelFn 传递给关闭当前上下文的模态框。类似的东西

var continueFn = this.createUnsavedDialogContinueFn(this, transition);

该函数在哪里:

createUnsavedDialogContinueFn: function(context, transition){
        return function(){
            context.controller.set('transitionAuthorized', true);
            transition.retry();
        }
}

我将此continueFn传递给模式，其我不关心是否有待处理的更改通过操作调用按钮。不过，如果您觉得更容易的话，您可以将这项工作委托(delegate)给 Controller /路由。重要的是您将 transitionAuthorized 设置为 true 并调用 transition.retry()

4).调用 transition.retry 将通过 willTransition 传回，但这次您已将 transitionAuthorized 设置为 true，所有内容都会通过。