How to tell Emberjs to render specific templates on a given outlet?

Question

I have an Emberjs template that looks like this:

<script type="text/x-handlebars" data-template-name="content-area">
    <div id="content">
        <div id="side-tree" class="ui-layout-west">
            <!-- components and deployments tree-->
            <div id="componentsTree" data-source="ajax"></div>

        </div>
        <div id="center-content" class="ui-layout-center">
            {{outlet content-area}}

        </div>
    </div>
</script>

I need to render different templates into that content-area outlet, depending on events generated by the user.

Also, when rendering those templates, I need to pass some data so it can be rendered correctly.

How can I explicitly tell Ember to render templates, say A or B, with specific data into the content-area outlet when handling those events?

Thanks!

Answer 1

Take a look at this answer.

Basically:

App.SomeRoute = Ember.Route.extend({

    renderTemplate: function() {
        // render the template called A
        this.render('A', {
            into: "application" // inside the application template (or any other already rendered templates)
            outlet: "a" //inside an outlet called a
            controller: "a" //using the controller A
        });

        this.render ....

    },

});

It goes without saying you can call render as many times as you'd like. Also that the controller can also be an object you instantiate and configure yourself.

I hope this helps you!