在Ember.js中，如何在渲染到出口后顯示Bootstrap模態

Question

在我的Ember.js應用ApplicationRoute當我openModal動作時，我openModal從ApplicationRoute打開一個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的didInsertElement來調度函數調用：

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

然后，我明確定義了ModalView並在其上創建了afterRenderEvent函數，該函數找到.modal DOM節點，瞧！

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

實時觀看： http ： //emberjs.jsbin.com/yifikuvebivu/1/edit

編輯

必須手動銷毀視圖，否則模態將不會再次出現：

App.ModalView = Em.View.extend({
  var this = self;
  afterRenderEvent: function() {
    this.$('.modal')
        .on('hidden.bs.modal', function() {
          self.triggerAction({
            action: 'closeModal'
          });
        })
        .modal();
  }
});

編輯2

有一個更好的解決方案，當使用component創建模態時，這是必需的。 我已經更新了上面的代碼段。

Answer 2

在renderTemplate Ember.Route掛鈎方法中執行此操作。

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