JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<div id="root"></div>
<script type="text/x-handlebars" data-template-name="application">
<h1>Test Context Passing</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="widgets">
<h2>List of widgets:</h2>
<ul>
{{#each widget in controller.content}}
<li><a {{action cloneWidget widget}} href="#">{{widget.name}}</a></li>
{{/each}}
</ul>
</script>
JavaScript
var TestApp = Ember.Application.create({
rootElement: '#root',
ApplicationView: Ember.View.extend({
templateName: 'application'
}),
init: function(){
this._super();
// Bootstrap
},
ApplicationController: Ember.Controller.extend({}),
Router: Ember.Router.extend({
enableLogging: true,
connectOutlets: function(router, context) {
window.console.log('Router received', context);
},
root: Ember.Route.extend({
cloneWidget: function(router, event) {
window.console.log("transitioning with ", event.context);
router.transitionTo('create', event.context);
},
connectOutlets: function(router, context) {
window.console.log('root received', context);
},
home: Ember.Route.extend({
route: '/',
editItem: Ember.Route.transitionTo('edit.list'),
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('widget');
window.console.log('root.home received' ,context);
},
}),
create: Ember.Route.extend({
route: '/new',
connectOutlets: function(router, context) {
window.console.log('root.create received', context);
}
})
})
})
});
(function(App){
App.Widget = Ember.Object.extend({
id: null,
name: null
});
App.WidgetController = Ember.ArrayController.extend({
content: [],
init: function(){
this.set('content', [
App.Widget.create({id:1,name:'foo'}),
App.Widget.create({id:2,name:'bar'}),
App.Widget.create({id:3,name:'baz'}),
]);
this._super();
}
});
App.WidgetView = Ember.View.extend({
...