Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When using Bootstrap 3.0 and final Ember 1.0, I couldn't get this code working. I rewrote it a bit (in coffeescript, layout and template handlebars are already precompiled to js with Grunt's emberTemplates)</p> <p><strong>app.coffee</strong></p> <pre><code>App.ApplicationRoute = Ember.Route.extend({ actions: open: -&gt; console.debug('open action triggered') @render('ContactModal', {into: 'profile', outlet: 'contactModal'}) close: -&gt; @render('nothing', {into: 'profile', outlet: 'contactModal'}) save: -&gt; alert('Send the message to person') }) </code></pre> <p><strong>modal_view.coffee</strong></p> <pre><code>App.ModalView = Ember.View.extend({ didInsertElement: -&gt; @$('.modal').modal('show') view = @ @$('.modal').on("hidden.bs.modal", (ev)-&gt; view.controller.send('close') return ) layout: Ember.TEMPLATES['modal_layout'] template: Ember.TEMPLATES['modal'] actions: close: -&gt; @$('.modal').modal('hide') return }) </code></pre> <p>This way clicking outside the modal also closes it properly, since removing the template from outlet is done on hiding the modal.</p> <p><strong>modal.handlebars:</strong></p> <pre><code>&lt;div class="modal-dialog"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" {{action close target="view"}}&gt;&amp;times;&lt;/button&gt; &lt;h3 class="modal-title"&gt;Contact&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;Here will go the contact form and contact template picker&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn btn-default" {{action close target="view"}}&gt;Close&lt;/a&gt; &lt;a href="#" class="btn btn-primary" {{action save}}&gt;Send&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p><strong>modal_layout.handlebars</strong></p> <pre><code>&lt;div class="modal fade" role="dialog"&gt;{{yield}}&lt;div&gt; </code></pre> <p>I also put togheter a jsfiddle: <a href="http://jsfiddle.net/bG4F8/5/">http://jsfiddle.net/bG4F8/5/</a> Have fun :)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload