Skip to content

Instantly share code, notes, and snippets.

@timoxley

timoxley/index.html

Created July 6, 2012 11:53
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save timoxley/3059725 to your computer and use it in GitHub Desktop.
Save timoxley/3059725 to your computer and use it in GitHub Desktop.
Download ZIP
simple example using ember router and connect outlet
Raw
index.html
<!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>
Raw
jsapp.js
(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();
})();
@metamatt
Copy link

Thanks for posting this. It's hard to find good Ember examples.

Do you know what version of Ember you were using? I assume it worked for you. I just tried it with 1.0.0-pre.4 and get "Uncaught TypeError: Object prototype may only be an Object or null" (same as this) unless I include handlebars.js first. And after I do that, the scripts load successfully but it just renders a blank screen -- the 'application' template renders, but the '/' route is never called, so it never calls connectOutlet().

@matzipan
Copy link

It doesn't work to me either, I get a

n.cc(179)] Running without renderer sandbox
[31640:0128/212510:INFO:CONSOLE(97)] "Uncaught TypeError: Cannot call method 'connectOutlet' of undefined",

@lancejpollard
Copy link

This is no longer how ember works, see these:

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