Skip to content

Instantly share code, notes, and snippets.

@AMSTKO

AMSTKO/render-multiple-outlets-ember.html

Forked from ryanflorence/render-multiple-outlets-ember.html
Created August 27, 2014 12:07
Show Gist options
  • Save AMSTKO/65ba6af6a52da6a150f2 to your computer and use it in GitHub Desktop.
Save AMSTKO/65ba6af6a52da6a150f2 to your computer and use it in GitHub Desktop.
Download ZIP
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment