模拟弹出窗口与ember 1.0 rc6

问题描述

如何使用最新版本的ember.js创建模态弹出窗口？我发现的每一个例子都使用了connectOutlet，它之前已经被弃用了，而我刚刚开始使用的事实并没有帮助。

How do you create a modal popup with the latest version of ember.js? Every single example I've found uses connectOutlet, which was deprecated a while ago, and the fact that I'm new to ember doesnt help.

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

I already have a named outlet in my application template, but how do I render my modal popup view to this outlet from a controller event? or should I use a route event?

推荐答案

Adam Hawkins刚刚发布了一个关于这个主题的精彩帖子，你可以在这里找到： http://hawkins.io/2013/06/ >

Adam Hawkins just published an excellent post on this topic, you can find it here: http://hawkins.io/2013/06/ember-and-bootstrap-modals/

总结：

• 包含 {{出口模式}} 在application.hbs


• 通过使用事件从路由器中退出插座


• 视图的 didInsertElement 钩子，它的关闭动作


• Modal的关闭动作应该定向视图，等待动画完成，然后再向路由器发送关闭事件

• Include {{outlet modal}} in application.hbs
• Render into the outlet from your router by using events
• Animation triggered by the view's didInsertElement hook and on it's close action
• Modal's close action should target the view, which waits for animation to complete before sending close event to the router

从Adam的jsfiddle：

From Adam's 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');
  }
});

这篇关于模拟弹出窗口与ember 1.0 rc6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！