JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<h1>Checkout</h1>
<div class="container">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="billingAddress">
<h2>Address</h2>
<button {{ action "delivery" }}>next</button>
</script>
<script type="text/x-handlebars" data-template-name="billingMethod">
<h2>Method</h2>
<button {{ action "billing" }}>previous</button>
</script>
CSS
body {
font : 16px/21px 'Helvetica Neue';
padding : 20px;
}
h1 {
font-size : 32px;
font-weight : bold;
margin : 0 0 32px 0;
}
h2 {
font-size : 24px;
font-weight : 500;
margin : 0 0 16px 0;
}
div.container {
padding : 8px;
border-radius : 4px;
border : 1px solid #EEE;
}
JavaScript
App = Ember.Application.create({});
App.BillingAddressModel = Ember.Object.create({
firstname : null
})
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
templateName : 'application'
});
App.BillingAddressController = Ember.Controller.extend({});
App.BillingAddressView = Ember.View.extend({
templateName : 'billingAddress'
});
App.BillingMethodController = Ember.Controller.extend({});
App.BillingMethodView = Ember.View.extend({
templateName : 'billingMethod'
});
App.Router = Ember.Router.extend({
enableLogging : true,
location : Ember.Location.create({
implementation : 'hash'
}),
root : Ember.Route.extend({
index : Ember.Route.extend({
route : '/',
redirectsTo : 'billing.address'
}),
billing : Ember.Route.extend({
route : '/billing',
address : Ember.Route.extend({
route : '/address',
delivery : Ember.Route.transitionTo('billing.method'),
connectOutlets : function (router, context) {
router.get('applicationController').connectOutlet('billingAddress')
}
}),
method : Ember.Route.extend({
route : '/method',
billing : Ember.Route.transitionTo('billing.address'),
connectOutlets : function (router, context) {
router.get('applicationController').connectOutlet('billingMethod');
}
})
})
})
});
App.initialize();