Ember.js with 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。また、実際の受信トレイページに移動するためにモーダル受信トレイにボタンを表示したい場合は、機能しません。

質問：どのように私は正しくemberルーティングとTwitterブートストラップモードを使用するのですか？ビューへのルート、modal..AssumingをロードしますdidInsertElementでモーダルを呼び出すと

Answer 1

あなたはモーダルで受信トレイビューにロードしたい

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

誰もがさらに参照したい場合、私はEmber.jsでTwitterのブートストラップモーダルを使用して上のポストを持っている：

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

は、完全なソースのために働いてJSBinが含まれています。また、フォームをDRYするための戦略もあります。 IMO、物事の命名はもう少し従来のものです。

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