Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking a pop up template in Ember.js
    primarykey
    data
    text
    <p>I'm (trying to) build my first ember application. I have two templates, user and user/edit as follows-</p> <pre><code>&lt;script type = "text/x-handlebars" id = "user"&gt; &lt;div class="user-profile"&gt; {{#if deleteMode}} &lt;div class="confirm-box"&gt; &lt;h5&gt;Really?&lt;/h5&gt; &lt;button {{action "confirmDelete"}}&gt; yes &lt;/button&gt; &lt;button {{action "cancelDelete"}}&gt; no &lt;/button&gt; &lt;/div&gt; {{/if}} &lt;button {{action "edit"}}&gt;Edit&lt;/button&gt; &lt;button {{action "delete"}}&gt;Delete&lt;/button&gt; &lt;img {{bind-attr src="avatarUrl"}} alt="User's avatar" /&gt; &lt;h2&gt;{{name}}&lt;/h2&gt; &lt;span&gt;{{email}}&lt;/span&gt; &lt;p&gt;{{bio}}&lt;/p&gt; &lt;span&gt;Created {{creationDate}}&lt;/span&gt; &lt;/div&gt; {{outlet}} &lt;/script&gt; &lt;script type = "text/x-handlebars" id = "user/edit"&gt; &lt;div class="input-group"&gt; &lt;div class="user-edit"&gt; &lt;h4&gt;New Agent&lt;/h5&gt; &lt;h5&gt;Agent Avatar&lt;/h5&gt; {{input value=avatarUrl}} &lt;h5&gt;User name&lt;/h5&gt; {{input value=name}} &lt;h5&gt;User email&lt;/h5&gt; {{input value=email}} &lt;h5&gt;User short bio&lt;/h5&gt; {{textarea value=bio}} &lt;/div&gt; &lt;button {{action "save"}}&gt; Save &lt;/button&gt; &lt;/div&gt; &lt;/script&gt; </code></pre> <p>The user template has an {outlet} in which the user/edit template appears when called. However, I'd like to make the user/edit template a pop up instead of it just appearing on the same page. I've been trying to use bootstrap modals to do so but without much success so far as I cant figure out the logistics. Has anyone got a better suggestion or a way of doing this? Very new to web dev so as simple as possible please.</p>
    singulars
    1. This table or related slice is empty.
    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.
 

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