Reputation: 835
I know this questions already been asked for several times. But I am having difficulties with it. I am creating an application with ember.js. I have about, contact, faq pages in my application. I want to show header and footer in all pages but the content will be changed based on page.so far I have:
Application Header
Application Footer
Application Home Page Contents
But I would like to have like this. basically the header and footer will be same for all pages but contents will change:
Application Header
Application Home Page Contents
Application Footer
Below is my code: app.js
App = Ember.Application.create();
App.Router.map(function() {
this.resource("about");
this.resource("contact");
this.resource("faq");
});
index.html
<script type="text/x-handlebars">
<h2>Application Header</h2>
<h2>Application Footer</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div id="contents">
<h2> Application Home Page Contents</h2>
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h2>Application About Page</h2>
</script>
<script type="text/x-handlebars" data-template-name="contact">
<h2>Application contact page</h2>
</script>
<script type="text/x-handlebars" data-template-name="faq">
<h2>Application FAQ page</h2>
</script>
Thanks in advance.example code will appreciated.
Upvotes: 1
Views: 2477
Reputation: 171
I use the main application route for this so my application template is:
<script type="text/x-handlebars" data-template-name="application">
{{partial "header"}}
{{outlet}}
{{partial "footer"}}
</script>
You could also replace the partials with views or render helper depending on if you need to change the controller or have access to the view directly in your script.
Upvotes: 3
Reputation: 6947
Not sure what you're asking. If you're talking about the order, {{outlet}}
doesn't have to be the last thing in your application template.
Check this fiddle: http://jsfiddle.net/shhQuiet/d799u/
Upvotes: 0