Ember.js z Twitter Bootstrap Modal

Question

Mam skonfigurować moją aplikację do korzystania z architektury routingu ember. Moje strony indeksu wygląda następująco (dla uproszczenia)

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

i mój Ember aplikacja jak ten

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

mam domu i skrzynkę działa dobrze, ale przede wszystkim, robię jQuery w my doInboxModal, aby pokazać modalną skrzynkę odbiorczą. A jeśli chcę mieć przycisk na modalnej skrzynce odbiorczej, aby przejść do rzeczywistej strony skrzynki odbiorczej, nie będzie działać.

Tak więc, pytanie brzmi: jak właściwie korzystać z modemu Bootstrap na Twitterze z routerem ember?

Answer 1

Gdy trasa do widzenia, nazywamy modalne w didInsertElement, który załaduje modal..Assuming chcesz modalna załadować na widoku skrzynki odbiorczej

App.InboxView = Ember.View.extend({ 
    didInsertElement: function(){ 
    $("#my-modal").modal("show"); 
    } 
}) 

zaktualizowaną Router:

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

Nadzieja to pomaga ...

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> 

ten sposób:

• Modalny pokaże przycisk kliknij
• widok z tyłu nie odejdzie
• modalna ukryje się po przycisku anulowania

Answer 2

mam post stosując czasowniki modalne Twitter Bootstrap z ember.js jeśli ktoś chce dalszego odniesienia:

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

Zawiera roboczą JSBin dla pełnego źródła. Ma również pewne strategie do wyrównywania formularzy. IMO, nazewnictwo rzeczy jest nieco bardziej konwencjonalne.

Answer 3

Spędziłem trochę czasu na analizowaniu Dyskursu, aby dowiedzieć się, jak oni to robią. Zasadniczo mają one jeden modalny i router obsługuje zdarzenia, aby wyświetlić i ukryć modalny.

tutaj są interesujące zalety:

discourse/app/trwałe/JavaScript/discourse/szlaki/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); 
    } 
    } 

rozmowa/APP/obrotowe/JavaScript/rozmowa/trasy/application_route. js

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

dyskursu/app/assets/javascripts/wykład/widoki/modal/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'); 
    } 

}); 

dyskursu/app/aktywa/JavaScripts/wykład/wstawek/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 
    })); 
    } 

}); 

app/aktywa/JavaScripts/dyskursu/templates/modalne/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}} 

iw ich application.js.handlebars: {{render modal}}