JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/handlebars.js"></script>
<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/ember.js"></script>
<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{{view App.TableView}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="bar">
<h2> Show Bar {{content.bar_id}}</h2>
</script>
CSS
td{
padding: 5px 15px;
}
li.active{
background: red;
}
JavaScript
var App;
App = Ember.Application.create();
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
}),
show: Ember.Route.extend({
route: '/show/:bar_id',
connectOutlets: function(router, bar) {
console.log(bar);
router.get('applicationController').connectOutlet('bar', bar);
}
})
})
});
App.ApplicationController = Ember.Controller.extend({
});
App.BarController = Ember.Controller.extend({
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.TableView = Ember.CollectionView.extend({
tagName: 'table',
content: [
Ember.Object.create({id: '1', name: 'Bar 1'}),
Ember.Object.create({id: '2', name: 'Bar 2'}),
Ember.Object.create({id: '3', name: 'Bar 3'})
],
itemViewClass: Ember.View.extend({
tagName: 'tr',
classNames: 'bar',
template: Ember.Handlebars.compile("<td>{{view.content.name}}"),
click: function(){
var router, tab;
router = this.get('controller.target.router');
router.transitionTo('show', this.get('content.id'));
//document.location.hash= 'show/' + this.get('content.id')
}
})
});
App.BarView = Ember.View.extend({
templateName: 'bar'
});