用Ember路由器v2进入和退出模式状态的正确方法是什么?

我找不出用新的Ember路由器处理模态状态/视图的正确方法。 更一般地说,你如何处理可以进入和退出而不影响“主”状态(URL)的状态?

例如,无论当前叶子状态如何,始终可用的“新消息”按钮。 点击“新消息”应该在当前视图上打开新的消息模式,而不会影响URL。

目前,我正在使用这样的方法:

路线:

App.Router.map(function() {
   this.route('inbox');
   this.route('archive');
});

App.IndexRoute = Em.Route.extend({
  ...
  events: {
    newMessage: function() {
      this.render('new_message', { into: 'application', outlet: 'modalView' });
    },

    // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view:
    hideModal: function() {
      // BAD - using private API
      this.router._lookupActiveView('application').disconnectOutlet('modalView');
    }
  }
});

App.InboxRoute = Em.Route.extend({
   ...
   renderTemplate: function(controller, model) {
     // BAD - need to specify the application template, instead of using default implementation
     this.render('inbox', { into: 'application' });
   }
});

App.ArchiveRoute = ... // basically the same as InboxRoute

application.handlebars:

<button {{action newMessage}}>New Message</button>
{{outlet}}
{{outlet modalView}}

显然,为了简洁,我省略了一些代码。

这种方法“有效”,但存在以上两个问题:

  • 我正在使用私有API来删除hideModal事件处理程序中的模式视图。
  • 我需要在我的所有子路径中指定application模板,因为如果我不这样做,那么renderTemplate的默认实现将尝试渲染到模式的模板中,而不是在应用程序中,如果打开模式,关闭它,然后在收件箱和存档状态(因为模板的模板已成为lastRenderedTemplate的最后一个模板)。
  • 显然,这些问题都不是破坏者,但是知道我是否缺少更好的方法或者这只是当前路由器API中的一个缺口,这将是很好的。


    我们做同样的事情,但没有访问私有API。 我不知道我们的解决方案是否是最佳实践,但它是有效的。

    在我们的RootRoute事件中,我有一个事件(和你的newMessage相同),我们创建了我们需要渲染的视图,然后附加它。

    events: {
        showNewSomething: function(){
            var newSomethingView = app.NewSomethingView.create({
                controller: this.controllerFor('newSomething')
            });
            newSomethingView.append();
        }
    }
    

    这将模态视图添加到我们的应用程序中。 在取消或保存在newSomethingView我们调用this.remove()来销毁视图并将其从应用程序中再次移除。

    再一次,这不像是一种最佳实践,但它的工作原理。 如果有人有更好的解决方案,请随时对此评论。


    不知道你是使用Bootstrap Modal脚本还是使用哪一个脚本,但如果你是这样,这个问题有一个建议的解决方案。 自己还没有弄清楚所有的东西,但我正在寻找一种类似的解决方案,以便能够以符合“Ember最佳实践”的方式使用Colorbox。

    链接地址: http://www.djcxy.com/p/68405.html

    上一篇: What's the right way to enter and exit modal states with Ember router v2?

    下一篇: Large NewSize of java heap make process unresposive for long time