Twitter ile Ember.js Bootstrap Modal

Question

Uygulamamı, sanal yönlendirme mimarisini kullanmak üzere ayarladık. Benim dizin sayfaları

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

ve ben iyi çalışıyor ev ve gelen kutusuna sahip bu

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

gibi benim kor uygulaması, fakat her şeyden önce, ben jquery yapıyorum (basitlik uğruna) şöyle moin gelen kutusunu göstermek için doInboxModal'ım. Ve sonra gelen gelen kutusu sayfasına gitmek için kalıcı gelen kutusu üzerinde bir düğme varsa, işe yaramaz.

Öyleyse, soru şu ki, bir Twitter Bootstrap Modal'ı düzgün bir yönlendirmeyle nasıl düzgün kullanırım? Eğer bir görünüme yol, modal..Assuming yükleyecektir didInsertElement içinde modal, çağırdığınızda

Answer 1

, kalıcı gelen kutusu görünümünde yüklemek istediğiniz

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

güncellenmiş yönlendirici:

Bu yardımcı olur

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

Umut ...

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> 

Bu şekilde:

• butonuna gösterecektir modal arkasında uzakta
• modal gitmez
• görünümünü tıklayın
iptal düğmesine gizlenir 10

Answer 2

Kimseye ayrıca başvuru istiyorsa ember.js ile Twitter Bootstrap sistemle modeller kullanma konusunda yazı var:

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

tam kaynak için bir çalışma JSBin dahildir. Ayrıca DRY up up formları için bazı stratejileri vardır. IMO, şeylerin isimlendirilmesi de biraz daha geleneksel.

Answer 3

Bunu nasıl yaptıklarını öğrenmek için Söylemin parçalanması için biraz zaman harcadım. Temel olarak, bir tekil modal var ve yönlendirici, modal görüntülemek ve gizlemek için olayları ele alır.

söylem/app/varlıklar/javascripts/söylem/rotalar/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); 
    } 
    } 

söylem/app/varlıklar/javascripts/söylem/yönlendirme/application_route: Burada

ilginç parçalarıdır.

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

söylem/app/varlıkları/JavaScripts/söylemi/görünümleri/modal/modal_body_view js.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'); 
    } 

}); 

söylem/app/varlıklar/javascripts/söylem/Katmalar/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/varlıklar/javascripts/söylem/templates/modal/modal.js.handlebars

Ve onların application.js.handlebars içinde

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

: {{render modal}}