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 に挿入し、たとえばコントローラー UI プロパティにバインドできるisHiddenプロパティを使用してビューを管理できます。ビューのライフサイクルはdidInsertElementとしてフックするか、 transitionHide、transitionShowフックとして新しく定義されます。

于 2013-01-30T17:11:01.810 に答える