twitter-bootstrap - 如何使用 Ember.js 创建和管理 Twitter Bootstrap 模式

Question

我能够获得一个很好的 Bootstrap 模式来正确显示/隐藏并显示存储在模式 Controller 上的消息，如下所示:
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');
  }
});

我在这里发布这个有两个原因:

我做对了吗？使用 Ember 可能很难理解开发人员打算如何完成某些事情。

如果其他人可以帮助改进/验证它的有效性，那么它可以作为那些希望在 Ember.js 中实现 Bootstrap 模态的示例

Answer 1

看看 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