twitter-bootstrap – 使用Twitter Bootstrap Modal的Ember.js

发布时间：2020-12-18 00:23:46 所属栏目：安全来源：网络整理

导读：我已经设置了我的应用程序来使用ember路由架构.我的索引页面看起来像这样(为简单起见) script(type='text/x-handlebars',data-template-name='application') div.container {{outlet}} 和我的这个ember应用程序 window.App = Em.Application.create({ Applic

我已经设置了我的应用程序来使用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>

这条路：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!