如何使用Ember.js创建和管理Twitter Bootstrap Modal [英] How to create and manage a Twitter Bootstrap Modal with Ember.js

问题描述

我能够得到一个很好的bootstrap模态来显示/隐藏正确，并显示存储在模态控制器上的msg，如下所示：
Ember Bootstrap模式示例

相关代码{

< pre class =lang-html prettyprint-override> //上下文
< script type =text / x-handlebarsdata-template-name =application>
< div class =container>
{{outlet}}
< / div>
< div id =modalclass =modal hidetabindex = - 1role =dialogaria-labelledby =ariaLabelaria-hidden =true>
{{rendermodal}}
< / div>
< / script>

//模态模板
< script type =text / x-handlebarsdata-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 =modalBtndata-dismiss =modalaria-hidden =truestyle =vertical-align：bottom
{{bindAttr class =： btn：btn-large：btn-block isCorrect：btn-success：btn-danger}}
{{actioncallback}}>
{{btn}}
< / button>
< / div>
< / div>
< / script>


  // controllers 
 App.HomeController = Ember.Controller.extend（{
需要：['modal']，
 
 showModal：function（）{
 var modCon = this.get 'controllers.modal'）; 
 
 if（modCon.get（'isCorrect'））{//一些逻辑
 modCon.setProperties（{
 title：'Correct' 
 msg：'你得到积分'，
 btn：'Next'
}）; 
} 
 else {
 modCon.setProperties（{
标题：'不正确'，
 msg：'请再试一次'，
 btn：'关闭'
}）; 
} 
 $（'＃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 catch action'）; 
} 
}）; 
  

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

1. 我做错了吗？使用Ember可能难以理解开发者如何使某些事情得以实现。
   


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

解决方案

对于Ember CLI用户，是一些更新的方法/链接更新：

https://github.com/mattbeedle/ember-cli-bootstrap-modal-example

http://indexiatech.github.io/ember-components/#/overview

I was able to get a nice bootstrap modal to show / hide properly and display a msg stored on the modal controller as demonstrated here: Ember Bootstrap Modal Example

Relevant code {

// 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');
  }
});

I'm posting this here for two reasons:

1. Am I doing it right? With Ember it can be difficult to understand how the developers intended certain things to be accomplished.
   
2. If others can help improve / verify it's validity then it can serve as an example for those with the desire to implement Bootstrap modals in Ember.js

解决方案

For Ember CLI users, here are some more recent approaches / link updates:

https://github.com/mattbeedle/ember-cli-bootstrap-modal-example

http://indexiatech.github.io/ember-components/#/overview

这篇关于如何使用Ember.js创建和管理Twitter Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！