Skip to content

Instantly share code, notes, and snippets.

@givanse
Last active August 29, 2015 14:01
Show Gist options
  • Save givanse/fedbfa289469b34ba310 to your computer and use it in GitHub Desktop.
Save givanse/fedbfa289469b34ba310 to your computer and use it in GitHub Desktop.
Two separate Routes/Templates sharing a single Controller.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
<meta charset="utf-8">
<title>1 controller, 2 templates</title>
</head>
<body>
<script type="text/x-handlebars">
Two separate Templates sharing a single Controller:
<a href='http://jsbin.com/hutemode/3/edit?html,js,output'>jsbin</a>
<ul>
{{#link-to 'index'}}Index{{/link-to}}
{{#link-to 'my_template'}}My template{{/link-to}}
<ul>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h1>Index</h1>
foo: {{obj.foo}}<br>
bar: {{obj.bar}}
</script>
<script type="text/x-handlebars" id="my_template">
<h1>My Template</h1>
bar: {{obj.bar}}<br>
foo: {{obj.foo}}
</script>
</body>
</html>
App = Ember.Application.create();
App.Router.map(function () {
this.route("my_template");
});
App.IndexController = Ember.Controller.extend({
init: function () {
this._super();
/* increment foo by 1 each second */
var me = this;
window.setInterval(function () {
var curr = me.get('obj.foo');
me.set('obj.foo', curr + 1);
}, 1000);
},
obj: {
foo: 1,
bar: 'lorem ipsum'
}
});
App.MyTemplateRoute = Ember.Route.extend({
/*
Specify controller of a route via controllerName
https://github.com/emberjs/ember.js/pull/2955
*/
controllerName: 'index'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment