Ember.js与Twitter Bootstrap Modal

Question

我已经设置了我的应用程序来使用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',
            connectOutlets: (router, event) ->
                router.get('applicationController').connectOutlet('inbox')  
        })
    })  
})

我有家和收件箱工作正常,但首先,我在我的doInboxModal中做jquery来显示模态收件箱.如果我想在模态收件箱上有一个按钮转到实际的收件箱页面,它将无法正常工作.

所以,问题是,如何正确使用Twitter Bootstrap Modal和ember路由？

Answer 1

当您路由到视图时,调用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: '/',
        connectOutlets: (router, event) ->
          router.get('applicationController').connectOutlet('home')   
      }),
      inbox:Em.Route.extend({
        route: '/inbox',
        connectOutlets: (router, 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>

这条路:

• 模式将在按钮单击时显示
• 后面的观点不会消失
• 模态将隐藏在取消按钮上

Answer 2

如果有人想进一步参考,我已经发布了使用Twitter Bootstrap模式与Ember.js:

http://generali.st/en/site/topics/show/82-modal-forms-in-emberjs

包含完整源代码的工作JSBin.还有一些干燥表格的策略.IMO,事物的命名也有点传统.