9

最新バージョンの ember.js でモーダル ポップアップを作成するにはどうすればよいですか? 私が見つけたすべての例では、少し前に非推奨になった connectOutlet を使用していますが、私が ember を初めて使用するという事実は役に立ちません。

アプリケーション テンプレートに名前付きアウトレットが既にありますが、モーダル ポップアップ ビューをコントローラ イベントからこのアウトレットにレンダリングするにはどうすればよいですか? または、ルートイベントを使用する必要がありますか?

4

5 に答える 5

0

コンポーネントを使用し、Bootstrap 独自の却下機能に依存してsendAction. willDestroyElement物を壊すことを担当します。コードからこれを取り出したので、CoffeeScript と Emblem.js にあります。

アプリケーション.コーヒー:

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

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

モーダル-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" ×
          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
于 2014-06-30T06:59:26.330 に答える
0

問題に対するより視覚的でシンプルな解決策を探している場合は、Brett Valentine によるこの YouTube ビデオをチェックすることを強くお勧めします。

Ember で Twitter Bootstrap にバインドする

私は地元の emberjs ミートアップでその開発者に会ったことがありますが、彼はブートストラップ モーダルをコンポーネントとしてプロジェクトに統合する方法について説明しています。

ブートストラップ要素を再利用可能なコンポーネントとして統合することは理にかなっています。将来、他のプロジェクトでそれらを使用する可能性が高いからです。

于 2014-07-27T03:52:06.143 に答える