Ember.js Template Handlebars helpers: Render

Ember.js Template Handlebars helpers: Render

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<h3>Ember.js Template Handlebars helpers: Render</h3>

<b>render</b>

<p>Calling ``{{render}}`` from within a template will insert another template that matches the provided name. <b>The inserted template will access its properties on its own controller (rather than the controller of the parent template).</b>
</p>
<p>If a view class with the same name exists, the view class also will be used.</p>
<p><b>Note:</b> A given controller may only be used *once* in your app in this manner. A singleton instance of the controller will be created for you.</p>
<p>Optionally you may provide a second argument: a property path that will be bound to the `model` property of the controller.</p>
<p>If a `model` property path is specified, then a new instance of the controller will be created and `{{render}}` can be used multiple times with the same name. You can see this in the navigation and footer templates.</p>
<p>See the About page for an example here.</p>
<script type="text/x-handlebars">
    {
        {
            controller
        }
    } {
        {
            render "navigation"
        }
    }

    < p > {
        {
            outlet "header"
        }
    } < /p>    
    <p>{{outlet}}</p > < p > {
        {
            outlet "footer"
        }
    } < /p>
</script>
<script type="text/x-handlebars" data-template-name="navigation">
    < ul class = "nav" > < li > < a href = "#" > {
        {
            siteName
        }
    } < /a></li > < li > {
        {#link - to 'home'
        }
    }
    Home {
        {
            /link-to}}</li > < li > {
                {#link - to 'about'
                }
            }
            About {
                {
                  ...

JavaScript

var App = Ember.Application.create({
    //LOG_TRANSITIONS: true,
    //LOG_RESOLVER: true,
    //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
    //LOG_MODULE_RESOLVER: true, 
    //LOG_TRANSITIONS: true,
    //LOG_TRANSITIONS_INTERNAL: true,
    //LOG_VIEW_LOOKUPS: true 
});

App.Router.map(function () {
    this.route('home');
    this.route('about');
});

// accessing its properties on NavigationController rather than the parent: ApplicationController
App.ApplicationController = Ember.Controller.extend({
    siteName: "Not this siteName, better use a partial :)"
});

// accessing its properties on its own controller  
App.NavigationController = Ember.Controller.extend({
    siteName: "Ember HB Render",
    username: {
        "firstName": "J",
        "lastName": "Crave"
    }
});

App.HomeRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('home');
        this.render('other', {
            outlet: 'header'
        });
        this.render('other', {
            outlet: 'footer'
        });
    }
});

App.AboutRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('other');
        this.render('header', {
            outlet: 'header'
        });
        this.render('footer', {
            outlet: 'footer'
        });
    }
});

// accessing its properties on its own controller  
App.AboutController = Ember.Controller.extend({
    username: {
        "firstName": "Jesse",
        "lastName": "Cravens"
    }
});