ここに示されているように、適切に表示/非表示を切り替え、モーダルコントローラーに保存されているメッセージを表示するための素敵なブートストラップモーダルを取得できました: 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 つあります。
- 私はそれを正しくやっていますか?Ember では、開発者が特定のことをどのように達成しようとしたかを理解するのが難しい場合があります。
- 他の人がその有効性を改善/検証するのに役立つ場合、Ember.js に Bootstrap モーダルを実装したい人のための例として役立ちます。