twitter-bootstrap – 如何使用Ember.js创建和管理Twitter Boots

相关代码{

// 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模态的人的一个例子.