我已经设置了我的应用程序来使用ember路由架构.我的索引页面看起来像这样(为简单起见)
script(type='text/x-handlebars',data-template-name='application')
div.container
{{outlet}}
和我的这个ember应用程序
window.App = Em.Application.create({
ApplicationController: Em.Controller.extend(),ApplicationView: Ember.View.extend({
templateName: 'application'
}),Router: Em.Router.extend({
root: Em.Route.extend({
doHome: (router,event) ->
router.transitionTo('home')
doInBox: (router,event) ->
router.transitionTo('inBox')
doInBoxModal: (router,event) ->
$("#inBox").modal "show"
home: Em.Route.extend({
route: '/',connectOutlets: (router,event) ->
router.get('applicationController').connectOutlet('home')
}),inBox:Em.Route.extend({
route: '/inBox',event) ->
router.get('applicationController').connectOutlet('inBox')
})
})
})
我有家和收件箱工作正常,但首先,我在我的doInBoxModal做jquery来显示模态收件箱.如果我想在模态收件箱上有一个按钮转到实际的收件箱页面,它将无法正常工作.
所以,问题是,如何正确使用Twitter Bootstrap Modal和ember路由？
解决方法
当您路由到视图时,调用didInsertElement中的模态,该模式将加载模态.假设您希望在收件箱视图中加载模态
App.InBoxView = Ember.View.extend({ didInsertElement: function(){ $("#my-modal").modal("show"); } })
你更新的路由器：
window.App = Em.Application.create({
ApplicationController: Em.Controller.extend(),ApplicationView: Ember.View.extend({
templateName: 'application'
}),Router: Em.Router.extend({
root: Em.Route.extend({
doHome: (router,event) ->
router.transitionTo('home')
doInBox: (router,event) ->
router.transitionTo('inBox')
home: Em.Route.extend({
route: '/',event) ->
router.get('applicationController').connectOutlet('home')
}),inBox:Em.Route.extend({
route: '/inBox',event) ->
router.get('applicationController').connectOutlet('inBox')
})
})
})
希望这可以帮助…
Updated Answer
App.InBoxView = Ember.View.extend({ templateName: "inBox",addNewEmail: function(){ $("#my-modal").modal("show"); },cancelNewEmail: function(){ $("#my-modal").modal("hide"); } })
inBox.handlebars
<div id="inBox-container"> <!-- YOUR INBox CONTENT The modal declared below wont show up unless invoked --> <a {{action addNewEmail}}>New Email</a> <a {{action cancelNewEmail}}>Cancel</a> <div class="modal hide fade in" id="my-modal"> <!-- Put your modal content --> </div> </div>
这条路：
>按钮单击时将显示模态>背后的观点不会消失>模态将隐藏在取消按钮上