twitter-bootstrap - Ember.js 与 Twitter Bootstrap 模式

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 以显示模式收件箱。如果我想在模态收件箱上有一个按钮以转到实际的收件箱页面，它将无法正常工作。

所以，问题是，如何正确使用带有 ember 路由的 Twitter Bootstrap 模式？

Answer 1

当您路由到一个 View 时，在 didInsertElement 中调用模态，这将加载模态。假设您希望模态加载到收件箱 View

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");
  }
})

收件箱.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>

这边走:

模态将在按钮单击时显示

后面的景色不会消失

模态将隐藏在取消按钮