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
  • 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>
@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