ember.js - 带有 ember 1.0 rc6 的模态弹出窗口

Question

如何使用最新版本的 ember.js 创建模态弹出窗口？我发现的每个示例都使用了前一段时间已弃用的 connectOutlet，而且我是 ember 的新手这一事实也无济于事。

我的应用程序模板中已经有一个命名的 socket ，但是如何将我的模态弹出 View 从 Controller 事件呈现到此 socket ？还是我应该使用路线事件？

Answer 1

亚当霍金斯刚刚发表了一篇关于这个主题的优秀文章，你可以在这里找到它:http://hawkins.io/2013/06/ember-and-bootstrap-modals/

总结一下:

包括{{outlet modal}}在 application.hbs

使用事件

从路由器渲染到导出

由 View 的 didInsertElement 触发的动画钩住它的close行动

莫代尔的close Action 应该以 View 为目标，该 View 在发送 close 之前等待动画完成事件到路由器

来自亚当的 jsfiddle:

App.ApplicationRoute = Ember.Route.extend({
  events: {
    open: function() {
      this.render('modal', { into: 'application', outlet: 'modal' });
    },

    close: function() {
      this.render('nothing', { into: 'application', outlet: 'modal' });
    },

    save: function() {
      alert('actions work like normal!');
    }
  }
});

App.ModalView = Ember.View.extend({  
  didInsertElement: function() {
    this.$('.modal, .modal-backdrop').addClass('in');
  },

  layoutName: 'modal_layout',

  close: function() {
    var view = this;
    // use one of: transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd
    // events so the handler is only fired once in your browser
    this.$('.modal').one("transitionend", function(ev) {
      view.controller.send('close');
    });

    this.$('.modal, .modal-backdrop').removeClass('in');
  }
});