How to bind a Kendo UI MVVM model to a wizard style UI

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<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>

JavaScript

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: undefined,
	getTemplate: function(data) {
            var currStep = this.get("currentStep");
            if(currStep)
                return currentStep.getTemplate();
        },
	canGoNext: function() {
            return this.get("currentIndex")() < this.get("stepModels").length - 1;
        },
	goNext: function() {
            alert('stest');
            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() {
        kendo.data.ObservableObject.fn.init.call(this, this);
    
        this.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() { 
                this.set("currentStep", this.get("stepModels")[3]); 
            }}),
           ...