CODEWITHSUNDEEP
ember.js
Richard Knop
Richard Knop

Reputation: 83755

EmberJS pass variable to default template

So here is my HTML:

<script type="text/x-handlebars">
    <div id="top-panel">
        <h1>{{title}}</h1>
    </div>
    <div id="wrapper">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="home">
    <ul>
        {{#each}}
        <li>{{name}}</li>
        {{/each}}
    </ul>
</script>

<script src="js/app.js"></script>
<script src="js/router.js"></script>

My app.js:

window.App = Ember.Application.create();

My router.js:

App.Router.map(function () {
    this.resource("home", { path: "/" });
});

App.HomeRoute = Ember.Route.extend({
    model: function () {
        $.getJSON("mocks/stub1.json", function (data) {
            return data;
        });
    }
});

Now my problem is how can I send a variable to the default template (the one which renders home template inside {{outlet}}).

As you can see I want {{title}} to be a dynamic variable. The problem is, I already have a home route assigned to / path so I am not sure how to make {{title}} dynamic.

Upvotes: 1

Views: 1628

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

The default template as you call it is named application template. So therefore you can define the title property on the ApplicationController or ApplicationRoute as you please. In case you go with the controller:

App.ApplicationController = Ember.ObjectController.extend({
  title: 'Foo',
  ...
});

Hope it helps.

Upvotes: 1

Related Questions