<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember.debug.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet">
</head>
<body class="fuelux">
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="wizard/index">
<div class="step-pane sample-pane alert active">
<h4>Create</h4>
</div>
</script>
<script type="text/x-handlebars" data-template-name="wizard/review">
<div class="step-pane sample-pane alert active">
<h4>Review</h4>
</div>
</script>
<script type="text/x-handlebars" data-template-name="wizard/complete">
<div class="step-pane sample-pane alert active">
<h4>Complete</h4>
</div>
</script>
<script type="text/x-handlebars" data-template-name="wizard">
<div class="wizard" id="wizardIllustration">
{{form-wizard steps=routeValues currentPath=currentPath}}
<div class="actions">
{{#if showPrev}}
<button type="button" {{action 'prev'}}class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>{{prevButton}}</button>
{{/if}}
{{#if showNext}}
<button {{action 'next'}}type="button" class="btn btn-default btn-next" >{{nextButton}}<span class="glyphicon glyphicon-arrow-right"></span></button>
{{/if}}
</div>
<div class="step-content">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/form-wizard">
{{#each step in steps}}
{{wizard-step name=step.step activeIndex=activeIndex index=_view.contentIndex}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="components/wizard-step">
<span class="badge">{{displayIndex}}</span>{{name}}<span class="chevron"></span>
</script>
</body>
</html>
/* Put your CSS here */
html, body {
margin: 20px;
}
App = Ember.Application.create();
App.Router.map(function() {
this.resource('wizard', function(){
this.route('index');
this.route('review');
this.route('complete');
});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
this.transitionTo('wizard');
return ['red', 'yellow', 'blue'];
}
});
App.FormWizardComponent = Ember.Component.extend({
tagName: 'ul',
classNames: ['steps'],
currentPath: null, //passed in value, is current route
steps: null,
activeIndex: function(){
var currentPath = this.get('currentPath');
var steps = this.get('steps');
for(var i = 0; i < steps.length; i++){
if(steps[i].route === currentPath){
return i;
}
}
}.property('currentPath')
});
App.WizardStepComponent = Ember.Component.extend({
tagName: 'li',
attributeBindings: ['displayIndex:data-step'],
classNameBindings: ['isActive:active'],
index: null,
displayIndex: function(){
return this.get('index') + 1;
}.property('index'),
isActive: function(){
return this.get('activeIndex') === this.get('index');
}.property('activeIndex', 'index')
});
App.RouteVal = Ember.Object.extend({
route: null,
val: null
});
App.CurrentRouteAware = Ember.Mixin.create({
needs: ['application'],
currentPath: Ember.computed.alias("controllers.application.currentPath")
});
App.WizardController = Ember.Controller.extend(App.CurrentRouteAware, {
routeValues: [
App.RouteVal.create({
route: 'wizard.index',
step: 'Create',
next: 'Review',
nextTransition: 'wizard.review',
prevTransition: 'wizard.index',
showNext: true,
showPrev: false
}),
App.RouteVal.create({
route: 'wizard.review',
step: 'Review',
next: 'Complete',
prev: 'Create',
nextTransition: 'wizard.complete',
prevTransition: 'wizard.index',
showNext: true,
showPrev: true
}),
App.RouteVal.create({
route: 'wizard.complete',
step: 'Complete',
next: 'Make Another',
prev: 'Review',
nextTransition: 'wizard.complete',
prevTransition: 'wizard.review',
showNext: false,
showPrev: true
})
],
nextButton: routeVal('routeValues', 'next'),
prevButton: routeVal('routeValues', 'prev'),
nextTransition: routeVal('routeValues', 'nextTransition'),
showButtons: routeVal('routeValues', 'showButtons'),
prevTransition: routeVal('routeValues', 'prevTransition'),
showNext: routeVal('routeValues', 'showNext'),
showPrev: routeVal('routeValues', 'showPrev'),
actions: {
next: function(){
this.transitionToRoute(this.get('nextTransition'));
},
prev: function(){
this.transitionToRoute(this.get('prevTransition'));
}
}
});
function routeVal(routeVals, prop){
return Ember.computed('currentPath', function(){
var currentRoute = Ember.get(this, 'currentPath');
var routeValues = Ember.get(this, routeVals);
for (var i = 0; i < routeValues.length; i++) {
if (routeValues[i].route === currentRoute) {
return routeValues[i][prop];
}
}
});
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |