4

ここに示されているように、適切に表示/非表示を切り替え、モーダルコントローラーに保存されているメッセージを表示するための素敵なブートストラップモーダルを取得できました: Ember Bootstrap Modal Example

関連コード {

// context
<script type="text/x-handlebars" data-template-name="application"> 
  <div class="container">
    {{outlet}}
  </div>
  <div id="modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="ariaLabel" aria-hidden="true">
    {{render "modal"}}
  </div>
</script>

// modal template
<script type="text/x-handlebars" data-template-name="modal">
  <div class="modal-header"> 
    <h2>{{title}}</h2> 
  </div>
  <div class="modal-body"> 
    <h4>{{{msg}}}</h4>
  </div>
  <div class="modal-footer">
    <div class="span3 pull-right">
      <button 
        id="modalBtn" data-dismiss="modal" aria-hidden="true" style="vertical-align:bottom"
        {{bindAttr class=":btn :btn-large :btn-block isCorrect:btn-success:btn-danger" }} 
        {{action "callback"}}>
        {{btn}}
      </button>
    </div>
  </div>
</script>
// controllers
App.HomeController = Ember.Controller.extend({
  needs: ['modal'],

  showModal: function(){
    var modCon = this.get('controllers.modal');

    if( modCon.get('isCorrect') ){ // some logic
      modCon.setProperties({
        title: 'Correct',
        msg: 'You get points',
        btn: 'Next'
      });
    }
    else{
      modCon.setProperties({
        title: 'Incorrect',
        msg: 'Please try again',
        btn: 'Close'
      });
    }
    $('#modal').modal(); // show
  }
});

App.ModalController = Ember.Controller.extend({
  isCorrect: true,
  title: 'modCon title',
  msg: 'modCon message',
  btn: 'modCon btn label',
  callback: function(){
     alert('modal controller caught action');
  }
});

これをここに投稿する理由は 2 つあります。

  1. 私はそれを正しくやっていますか?Ember では、開発者が特定のことをどのように達成しようとしたかを理解するのが難しい場合があります。
  2. 他の人がその有効性を改善/検証するのに役立つ場合、Ember.js に Bootstrap モーダルを実装したい人のための例として役立ちます。
4

4 に答える 4

3

Ember for Bootstrapを見てみましょう。Ember で Bootstrap モーダルを使用するシンプルかつ強力な方法があります。

モーダルデモ: http://ember-addons.github.io/bootstrap-for-ember/#/show_components/modal

GitHub リポジトリ: https://github.com/bootstrap-for-ember/bootstrap-for-ember

于 2013-09-03T00:13:29.717 に答える
1

これは、あなたが望むことを行う別の方法です。

私がしたことは、次のようなモーダルを持っていたことです:

<!-- modal edit dialog -->
<div class="modal hide fade" tabindex="-1" id="editView">
        {{view MainApp.ModalContainerView elementId="modalContainerView"}}
</div>

ここで、「MainApp.ModalContainerView」はコンテナー ビューです。次に、モデルのテンプレートをレンダリング/表示したいときに、これを行いました:

        var containerView = Em.View.views['modalContainerView']; 
        if(containerView == undefined)
            return;
        var temp =  containerView.toArray(); 
        if(temp.length > 0)
            containerView.removeAllChildren();
        containerView.addObject(view);

「ビュー」は、モーダルに表示するビューです。そのコンテナにビューがないことを確認するために、「modalContainerView」にある最後のビューを削除していることに注意してください。

最後に、モーダルを表示するだけです:

$('#editView').modal({
            show : true,
            keyboard : true,
            resizeToFit : true
});

これがあなたのお役に立てば幸いです。

フアニトス

于 2013-06-02T09:42:14.347 に答える