Question

在EmberJS中创建模态表单的好方法或模式。类似于this。

Answer 1

您可以使用我修改后的Bootstrap.ModalPane

前：

App.ContactView = Bootstrap.ModalPane.extend({
  closeOnEscape: false,
  showBackdrop: true,
  showCloseButton: false,
  heading: 'Contact',
  primary: "Save changes",
  secondary: "Cancel",
  classNames: ["large-modal"],

  bodyViewClass: Ember.View.extend({
    templateName: 'contact-body'
  }),  

  callback: function (opts, event) {
    var controller = this.get('controller');
    if (opts.primary) {
        controller.save();
    } else {
        controller.cancel();
    }    
  }
});

在您的控制器中，您可以执行以下操作：

editContact: function (contact) {
   var contactController = this.controllerFor('contact');
    contactController.set('content', contact);
    var contactView = App.ContactView.create({
        controller: contactController
    });
    contactView.append();
},

您还可以使用自定义来定义自己的modalPaneTemplate。这是Boostrap.ModelPane如何工作的原则，默认它只支持底部的2个按钮。如果您想要5个按钮或标题中的按钮，请自行开始编码并创建自定义modalPaneTemplate。

Answer 2

我将描述使用CSS方法管理模态视图的方式：

添加CSS类名：

.modal {

  -webkit-transition: -webkit-transform @modal-duration @ease-animation-style;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;

}

.modal.from-left.is-hidden {

  -webkit-transform: translate3d(-320px,0,0);

}

.modal.from-right.is-hidden {

  -webkit-transform: translate3d(320px,0,0);

}

.modal.from-up.is-hidden {

  -webkit-transform: translate3d(0,-1*@app-height,0);

}

.modal.from-down.is-hidden {

  -webkit-transform: translate3d(0,@app-height,0);

}

将自定义事件添加到应用程序命名空间以在视图中接收transitionEnd事件：

Yn.Application = Em.Application.extend( Em.Evented, {
  customEvents: {
    webkitTransitionEnd:  'transitionEnd',
    ......
  }
});

现在创建一个mixin，在视图中用作：

Yn.Modal = Em.Mixin.create({

  isHidden: true,
  classNameBindings: ['isHidden'],
  classNames: ['modal'],


  transitionEnd: function(event) {
    // transitionEnd triggers multiple times
    // http://stackoverflow.com/questions/4062105/webkit-transitionend-event-grouping

    if ( event.originalEvent.propertyName === '-webkit-transform' && 
        $(event.target)[0] === this.$()[0] ) {
      var eventName = this.get('isHidden') ? 'transitionHide' : 'transitionShow' ;
      this.trigger(eventName);
    }

  }

});

您现在可以通过appendTo或任何手柄视图模板或您使用的任何方法在DOM中插入视图，并使用 isHidden 属性管理您的视图，该属性可以绑定到控制器UI属性，您还可以使用视图生命周期挂钩与视图进行交互 didInsertElement 或新定义为 transitionHide ， transitionShow 挂钩。

EmberJS：如何创建模态表单

2 个答案: