Skip to content

Instantly share code, notes, and snippets.

@ryanflorence

ryanflorence/render-multiple-outlets-ember.html

Last active September 20, 2019 02:18
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save ryanflorence/4975067 to your computer and use it in GitHub Desktop.
Save ryanflorence/4975067 to your computer and use it in GitHub Desktop.
Download ZIP
Render templates into multiple outlets with ember.js and the new router.
Raw
render-multiple-outlets-ember.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Render Multiple Outlets</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/handlebars.js"></script>
<script src="js/vendor/ember.js"></script>
<script src="js/vendor/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
<h2>home</h2>
{{outlet navigation}}
{{outlet main}}
</script>
<script type="text/x-handlebars" data-template-name="nav">
<h3>nav</h3>
</script>
<script type="text/x-handlebars" data-template-name="content">
<h3>content</h3>
</script>
<script>
var App = Ember.Application.create();
App.HomeRoute = Ember.Route.extend({
renderTemplate: function() {
// default behavior, renders the home template
this.render();
this.render('nav', { // render the `nav` template
into: 'home', // into the `home` template (rendered above)
outlet: 'navigation' // using the outlet named `navigation`
});
// same here
this.render('content', {
into: 'home',
outlet: 'main'
});
}
});
App.Router.map(function() {
this.route('home', {path: '/'});
});
</script>
@djpentz
Copy link

djpentz commented Dec 28, 2013

This is the closest I've seen to what I'm trying to do right now. One question however - how would I render dynamic content into nav such that the template was something like:

<script type="text/x-handlebars" data-template-name="nav">
<h3>{{ navHeader }}</h3>
</script>

@matejvelikonja
Copy link

+1 @djpentz question

@nightire
Copy link

nightire commented Apr 7, 2014

@djpentz, @matejvelikonja

render allows you to specify controller for each template, so you can prepare your data in separate controller for further use.

take a look at API document: http://emberjs.com/api/classes/Ember.Route.html#method_render

@csusantha
Copy link

Can i change the content of "nav" template dynamically at latter part of the code?
Is there any way to change the content of any template within the life cycle of my application?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment