0

ember アプリにブートストラップ モーダルを追加しようとしています。指定されたテンプレートを使用してモーダルを追加し、アクションを処理できるようにしたいと考えています。うまくいきません。モーダルが表示され、コントローラーのプロパティがバインドされていますが、アクションを処理できません。理由がわかりません。コントローラーのどこからでもモーダルをトリガーし、アクションをバインドできるようにしたいと思っています。

私の見解は次のようになります。

App.ModalView = Ember.View.extend({
    classNames:         ['modal fade'],
    attributeBindings:  ['role'],
    role:               'dialog',

    didInsertElement: function() {
        this._super();
        this.$().modal();
        this.$().on('hidden.bs.modal', this.close.bind(this));
    },
    close: function(event) {
        return this.destroy();
    }
});

そして、ランダムコントローラーで次のようにインスタンス化します。

var modal = controller.container.lookup('view:modal');
modal.reopen({
    controller:     this,
    targetObject:   this,
    templateName:   'mymodal'
});

return modal.appendTo('body');

私のテンプレートは次のようになります。

<div class="modal-dialog">
   <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
         <h4 class="modal-title">My Modal Title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
           <div class="col-md-12">
               My modal content
           </div>
        </div>
      </div>
      <div class="modal-footer">
         <button type="button" data-dismiss="modal" class="btn default">Close</button>
         <button type="button" class="btn green" {{ action "myaction"}}>My Button with an action</button>
      </div>
   </div>
</div>

コントローラーのプロパティを表示しようとすると、うまくいきます。しかし、「myaction」アクションでボタンをクリックしても何も起こりません。たぶん、アプリでモーダルを処理する方法について完全に間違っています (私は Ember's World ではかなり新しいです)。私は最後のリリースの ember (1.1.1) とブートストラップ 3 を使用しています。

ありがとう、

ヴィンク

4

3 に答える 3

2

私はそれを考え出した。実際、私のアプリは特定の dom 要素 (#app) に遭遇していました。ボディにビューを追加していたので、私のモダールはアプリの「外側」に追加されました! そのため、イベントのバブリング チェーンが壊れました。ビューを本文に追加する代わりに、アプリケーションのルート要素に追加すると、すべてが期待どおりに機能するようになりました!

于 2013-10-25T05:13:05.680 に答える
1

モーダル メソッドが本体から切断されている可能性が高く、これによりアクションが中断されます。

関連項目: Ember.js および Foundation 4 モーダル ウィンドウ

于 2013-10-25T04:46:23.890 に答える