Question

在我的Ember.js应用程序中，当我调用ApplicationRoute动作时，我想从我的openModal打开一个Bootstrap模式。

我将此作为我的ApplicationRoute：

module.exports = Em.Route.extend({
    actions: {
        openModal: function(modalName) {
            this.render(modalName, {
                into: 'application',
                outlet: 'modal'
            });
            $('#active-modal').modal();
        }
    }
});

现在我的问题是#active-modal没有打开，可能是因为在render调用之后它不存在于DOM中。

我该如何解决这个问题？

演示：http://emberjs.jsbin.com/cowoviwiwoyi/1/edit

Answer 1

在本文中找到了一个解决方案：http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

这是更优雅的解决方案，没有必要重新打开Ember.View但是它可以在需要时适用于所有视图。

仍然是ApplicationRoute：

App.ApplicationRoute = Em.Route.extend({
  actions: {
    showModal: function() {
      return this.render('modal', {
        into: 'application',
        outlet: 'modal'
      });
    }
    closeModal: function() {
      return this.disconnectOutlet({
        parentView: 'application',
        outlet: 'modal'
      });
    }
  }
});

但是现在我们已经覆盖Ember.View的{{1}}来安排函数调用：

didInsertElement

然后我明确地定义了ModalView并在其上创建了一个afterRenderEvent函数，它找到.modal DOM节点并且瞧！

Em.View.reopen({
  didInsertElement: function() {
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  }
});

现场直播：http://emberjs.jsbin.com/yifikuvebivu/1/edit

修改

必须手动销毁视图，否则模态不会再次出现：

App.ModalView = Em.View.extend({ afterRenderEvent: function() { this.$('.modal').modal(); } });

修改2

有一个更好的解决方案，在使用组件创建模态时是必需的。我已经更新了上面的代码片段。

Answer 2

在renderTemplate Ember.Route钩子方法中进行。

renderTemplate: function() {
    $('active-modal').modal();
}

在Ember.js中，如何在渲染到插座后显示Bootstrap模态

2 个答案: