2

什么是在 EmberJS 中创建模态表单的好方法或模式。像这样的东西。

4

2 回答 2

0

我将描述我使用 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挂钩。

于 2013-01-30T17:11:01.810 回答
0

你可以使用我修改过的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。

于 2013-01-30T15:40:11.727 回答