Skip to content

Instantly share code, notes, and snippets.

@timoxley
Created July 6, 2012 11:53
Show Gist options
  • Save timoxley/3059725 to your computer and use it in GitHub Desktop.
Save timoxley/3059725 to your computer and use it in GitHub Desktop.
simple example using ember router and connect outlet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ember.js Router Example</title>
<meta name="description" content="Example of a basic Ember.js application with a Router" />
<meta name="author" content="http://codebrief.com" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
</head>
<body>
<script src="js/libs/jquery-1.7.1.js"></script>
<script src="js/libs/jquery.lorem.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/app.js"></script>
<script type="text/x-handlebars" data-template-name="home">
<div class="hero-unit">
<h1 {{action "toggle"}}>Home</h1>
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<div class="hero-unit">
<h1 {{action "toggle"}}>About</h1>
</div>
</script>
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
{{outlet}}
</div>
</script>
</html>
(function() {
'use strict'
// Create the application
window.App = Ember.Application.create({
HomeController: Ember.Controller.extend(),
HomeView: Ember.View.extend({
templateName: 'home'
}),
AboutController: Ember.Controller.extend(),
AboutView: Ember.View.extend({
templateName: 'about'
}),
ApplicationView: Ember.View.extend({
templateName: 'application'
}),
ApplicationController: Ember.Controller.extend({
}),
Router: Ember.Router.extend({
root: Ember.Route.extend({
toggle: function(router, event) {
console.log();
router.transitionTo(router.currentState.next);
},
home: Ember.Route.extend({
route: '/',
connectOutlets: function(router, event) {
router.get('applicationController').connectOutlet('home');
},
next: 'about'
}),
about: Ember.Route.extend({
next: 'home',
route: '/about',
connectOutlets: function(router, event) {
router.get('sidebarController').connectOutlet('sidebar');
router.get('contentController').connectOutlet('content');
router.get('footerController').connectOutlet('footer');
}
})
})
})
});
App.initialize();
})();