Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber.js Layout
    primarykey
    data
    text
    <p>I am just getting warm with ember.js and would like to create a single page application with it. Due to the nature of the application, I will have multiple "major" layouts at some point.</p> <p>After the user logged into the application, I need to display the user name based on an ajax call. I did not yet understand how I best implement this in ember.js, because this (at least to me) is outside of any view hierarchy.</p> <p>I played around with using the "into" option of the render method.</p> <pre><code>App.TestRoute = Ember.Route.extend({ renderTemplate: function(controller, model) { this.render('layout'); this.render('test',{ into: 'layout' }); }, }); </code></pre> <p>I thought this would also call the layout route and load its model. Unfortunately it did not do that.</p> <p>I went over to define a layout with a {{yield}} directive </p> <pre><code>&lt;div&gt; &lt;div class="container" id="header"&gt; {{loginUser.userName}} &lt;/div&gt; &lt;div class="container" id="main-content"&gt; {{yield}} &lt;/div&gt; &lt;div class="container" id="footer"&gt; Just some static footer &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and my view like</p> <pre><code>App.TestView = Ember.View.extend({ layoutName: 'layout' }); </code></pre> <p>The rendering works fine, but I fail to see where I can best inject the user data. Ideally this should be transparent for all views that make use of this layout. So my thought was to work with inheritance, but did not come to a working solution yet.</p> <p>Am I completely off track here or does this somehow make sense?</p> <p><strong>UPDATE</strong></p> <p>I put the example in here: <a href="http://jsfiddle.net/Efz8N/4/" rel="nofollow">http://jsfiddle.net/Efz8N/4/</a></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.
 

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