Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
underlogpro
0viewers