<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="view">
<div data-template="current-tmpl" data-bind="source: currentStep"></div>
<hr />
<button data-bind="click: goPrevious, enabled: canGoPrevious">Previous</button>
<button data-bind="click: goNext, enabled: canGoNext">Next</button>
</div>
<script id="current-tmpl" type="text/x-kendo-template">
<div>
<h2 data-bind="text: name"></h2>
<div data-template="#: getTemplate() #" data-bind="source: model"></div>
</div>
</script>
<script id="basic-tmpl" type="text/x-kendo-template">
<div data-bind="text: message"></div>
</script>
<script id="choice-tmpl" type="text/x-kendo-template">
<input type="checkbox" data-bind="checked: choiceOne" /> Choice One <br />
<input type="checkbox" data-bind="checked: choiceTwo" /> Choice Two
</script>
<script id="confirm-tmpl" type="text/x-kendo-template">
<button data-bind="click: confirm">Confirm</button>
</script>
</body>
</html>
var Step = kendo.data.ObservableObject.extend({
id: 0,
name: '',
template: '',
model: '',
init: function(id, name, template, model) {
kendo.data.ObservableObject.fn.init.call(this, this);
if(id) this.set("id", id);
if(name) this.set("name", name);
if(template) this.set("template", template);
if(model) this.set("model", model);
},
getTemplate: function() {
return this.get("template");
}
});
var StepsViewModel = kendo.data.ObservableObject.extend({
stepModels: [],
currentStep: undefined,
currentIndex: function() {
return this.get("stepModels").indexOf(this.get("currentStep"));
},
getTemplate: function(data) {
return this.get("currentStep").get("template");
},
canGoNext: function() {
return this.get("currentIndex") < this.get("stepModels").length - 1;
},
goNext: function() {
if (this.canGoNext()) {
this.get("currentStep")(this.get("stepModels")[this.get("currentIndex") + 1]);
}
},
canGoPrevious: function() {
return this.get("currentIndex") > 0;
},
goPrevious: function() {
alert('test');
if (this.canGoPrevious()) {
this.get("currentStep")(this.get("stepModels")[this.get("currentIndex") - 1]);
}
},
init: function() {
var that = this;
kendo.data.ObservableObject.fn.init.call(this, this);
that.stepModels = [
new Step(1, "Welcome", "basic-tmpl", { message: "Hello and Welcome!" }),
new Step(2, "Choices", "choice-tmpl", { choiceOne: kendo.observable(false),
choiceTwo: kendo.observable(false) }),
new Step(3, "Confirmation", "confirm-tmpl", { confirm: function() {
that.set("currentStep", that.get("stepModels")[3]);
}}),
new Step(4, "Congratulations", "basic-tmpl", { message: "You are finished!" })
];
that.currentStep = that.get("stepModels")[0];
}
});
kendo.bind($("#view"), new StepsViewModel());
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. |