Question

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

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

Answer 1

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

总结：

在application.hbs

{{outlet modal}}

使用事件
由视图didInsertElement挂钩及其close操作
模式的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/ 玩得开心:)）

Answer 3

感谢您分享您的代码Mike＆amp;达米安！以下是我如何使用它：

路由器：

App.Router.map ()->
  @resource 'posts', ->
    @resource 'post', path:':post_id', ->
      @route 'modal'

路线：

App.PostModalRoute = Em.Route.extend
  setupController: (model, controller) ->
    @controllerFor('post.modal').set 'content', @modelFor('post')
    @render 'posts/modal', into: 'application', outlet: 'modal'
    # Note: you need outlet named 'modal' in application template

查看：

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

  layout: Ember.Handlebars.compile '<div class="modal hide fade">{{yield}}</div>'

模板：

App.ModalView
  .modal-header
    button type="button" class="close" data-dismiss="modal" aria-hidden="true" ×
    h3
      | Post #
      = id
  .modal-body
    ...

Answer 4

使用组件，并依靠Bootstrap自己的解雇功能来触发sendAction。 willDestroyElement负责将事情撕毁。它在CoffeeScript和Emblem.js中，因为我从我的代码中解除了这个：

application.coffee：

  ApplicationRoute = Ember.Route.extend
    actions:
      openModal: (modalName) ->
        @render modalName,
          into: "application"
          outlet: "modal"

      closeModal: ->
        @disconnectOutlet
          outlet: "modal"
          parentView: "application"

modal-dialog.coffee：

  ModalDialogComponent = Ember.Component.extend

    didInsertElement: ->
      @$(".modal").modal "show"
      @$(".modal").on "hidden.bs.modal", => @sendAction()

    willDestroyElement: ->
      @$(".modal").modal "hide"
      @$(".modal").off()

模态-dialog.embl：

.modal.fade
  .modal-dialog
    .modal-content
      .modal-header
        button.close type="button" data-dismiss="modal"
          span aria-hidden="true" &times;
          span.sr-only Close
        h4.modal-title Modal title
      .modal-body
        = yield
      .modal-footer
        button.btn.btn-default type="button" data-dismiss="modal" Close
        button.btn.btn-primary type="button" Save

modal.embl：

= modal-dialog action="closeModal"
  p Hello

Answer 5

如果您正在寻找一个更直观，更简单的问题解决方案，我强烈建议您查看Brett Valentine的YouTube视频。

Binding to Twitter Bootstrap with Ember

我在当地的emberjs聚会上遇到了开发人员，但他将自举模式集成到项目中作为组件。

将bootstrap元素集成为可重用组件是有意义的，因为将来可能会在其他项目中使用它们。

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

5 个答案: