Ember.js與Twitter Bootstrap Modal

Question

我已經安裝我的應用程序以使用ember路由體系結構。我的索引頁看起來像這樣（爲簡單起見）

script(type='text/x-handlebars', data-template-name='application') 
    div.container 
     {{outlet}} 

和我的餘燼應用這樣

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') 
     }) 
    }) 
}) 

我有家庭和收件箱中工作正常，但首先，我做的jQuery我的doInboxModal顯示模式收件箱。如果我想然後在模式收件箱上有一個按鈕來轉到實際的收件箱頁面，它將不起作用。

所以，問題是，我該如何正確使用Twitter Bootstrap模態與燼路由？

Answer 1

當你的路線圖，呼籲在didInsertElement的模式，這將加載modal..Assuming你想要的模式對收件箱視圖加載

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的引導模態與Ember.js後：

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

包括了完整的源代碼工作JSBin。還有一些干擾形式的策略。國際海事組織，事物的命名也有點傳統。

Answer 3

我花了一些時間解剖話語，瞭解他們是如何做到這一點。基本上他們有一個單身模式，路由器處理事件以顯示和隱藏模態。

這裏是有趣的位：

話語/應用/資產/ JavaScript的/話語/路由/ discourse_route.js

showModal: function(router, name, model) { 
    router.controllerFor('modal').set('modalClass', null); 
    router.render(name, {into: 'modal', outlet: 'modalBody'}); 
    var controller = router.controllerFor(name); 
    if (controller) { 
     if (model) { 
     controller.set('model', model); 
     } 
     controller.set('flashMessage', null); 
    } 
    } 

話語/應用/資產/ JavaScript的/話語/路由/ application_route。 JS

events: { 
    editCategory: function(category) { 
     Discourse.Route.showModal(router, 'editCategory', category); 
     router.controllerFor('editCategory').set('selectedTab', 'general'); 
    } 

話語/應用/資產/ JavaScript的/話語/視圖/模式/ modal_body_view。JS

Discourse.ModalBodyView = Discourse.View.extend({ 

    // Focus on first element 
    didInsertElement: function() { 
    $('#discourse-modal').modal('show'); 

    var controller = this.get('controller'); 
    $('#discourse-modal').on('hide.discourse', function() { 
     controller.send('closeModal'); 
    }); 

    $('#modal-alert').hide(); 

    var modalBodyView = this; 
    Em.run.schedule('afterRender', function() { 
     modalBodyView.$('input:first').focus(); 
    }); 

    var title = this.get('title'); 
    if (title) { 
     this.set('controller.controllers.modal.title', title); 
    } 
    }, 

    willDestroyElement: function() { 
    $('#discourse-modal').off('hide.discourse'); 
    } 

}); 

話語/應用/資產/ JavaScript的/話語/混入/ modal_functionality.js

Discourse.ModalFunctionality = Em.Mixin.create({ 
    needs: ['modal'], 

    /** 
    Flash a message at the top of the modal 

    @method blank 
    @param {String} name the name of the property we want to check 
    @return {Boolean} 
    **/ 
    flash: function(message, messageClass) { 
    this.set('flashMessage', Em.Object.create({ 
     message: message, 
     messageClass: messageClass 
    })); 
    } 

}); 

應用程序/資產/ JavaScript的/話語/模板/莫代爾/ modal.js.handlebars

<div class="modal-header"> 
    <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a> 
    <h3>{{title}}</h3> 
</div> 
<div id='modal-alert'></div> 

{{outlet modalBody}} 

{{#each errors}} 
    <div class="alert alert-error"> 
    <button class="close" data-dismiss="alert">×</button> 
    {{this}} 
    </div> 
{{/each}} 

而且在他們的application.js.handlebars：{{render modal}}