使用ember 1.0 rc6的模态弹出窗口

Question

如何使用最新版本的ember.js创建模态弹出窗口？我发现的每一个例子都使用了一段时间之前弃用的connectOutlet,而且我刚接触到ember的事实并没有帮助.

我的应用程序模板中已经有一个命名插座,但是如何从控制器事件中将模态弹出视图渲染到此插座？或者我应该使用路线事件？

Answer 1

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

总结一下:

• 包含{{outlet modal}}在application.hbs中
• 使用事件从路由器渲染到插座
• 由视图的didInsertElement钩子和它的close动作触发的动画
• Modal的close操作应该以视图为目标,该视图在将close事件发送到路由器之前等待动画完成

来自Adam的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');
  }
});

Answer 2

使用Bootstrap 3.0和最终的Ember 1.0时,我无法使用此代码.我重写了一下(在coffeescript中,布局和模板把手已经使用Grunt的emberTemplates预编译为js)

app.coffee

App.ApplicationRoute = Ember.Route.extend({

    actions: 
        open: ->
            console.debug('open action triggered')
            @render('ContactModal', {into: 'profile', outlet: 'contactModal'})

        close: ->
            @render('nothing', {into: 'profile', outlet: 'contactModal'})

        save: ->
            alert('Send the message to person')
})

modal_view.coffee

App.ModalView = Ember.View.extend({
didInsertElement: ->
    @$('.modal').modal('show')
    view = @
    @$('.modal').on("hidden.bs.modal", (ev)->
        view.controller.send('close')
        return
    )

layout: Ember.TEMPLATES['modal_layout']

template: Ember.TEMPLATES['modal']

actions:
    close: ->
        @$('.modal').modal('hide')
        return
})

这样在模态外部单击也会正确关闭它,因为从插座中删除模板是在隐藏模态时完成的.

modal.handlebars:

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" {{action close target="view"}}>&times;</button>
    <h3 class="modal-title">Contact</h3>
  </div>
  <div class="modal-body">
    <p>Here will go the contact form and contact template picker</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-default" {{action close target="view"}}>Close</a>
    <a href="#" class="btn btn-primary" {{action save}}>Send</a>
  </div>
</div>

modal_layout.handlebars

<div class="modal fade" role="dialog">{{yield}}<div>

我还提出了一个问题:http://jsfiddle.net/bG4F8/5/ 玩得开心:)