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>
      <span data-bind="text: currentStep.name"></span> | 
      <span data-bind="text: currentStep.model.message"></span>
    </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">
    <h2 data-bind="text: name"></h2>
    <div data-template="getTemplate" data-bind="source: model"></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

function Step(id, name, template, model) {
    var that = this;
    that.id = id;
    that.name = name;
    that.template = template;
    that.model = model;
    
    that.getTemplate = function() {
        return that.template;   
    }
}

function ViewModel() {
    var that = this;
    var viewModel = kendo.observable({
    	stepModels: [
        new Step(1, "Welcome", "basic-tmpl", { message: "Hello and Welcome!" }),
        new Step(2, "Choices", "choice-tmpl", { choiceOne: false, choiceTwo: false }),
        new Step(3, "Confirmation", "confirm-tmpl", { confirm: function() { 
                viewModel.set("currentStep", viewModel.get("stepModels")[3]); 
            } 
        }),
        new Step(4, "Congratulations", "basic-tmpl", { message: "You are finished!" }),
    ],
    });
    
    viewModel.set("currentStep", viewModel.get("stepModels")[0]);

		viewModel.set("currentIndex", function() {
        return viewModel.get("stepModels").indexOf(viewModel.get("currentStep"));
    });
    
    viewModel.set("getTemplate", function() {
        return viewModel.get("currentStep").get("template");
    });
    
    viewModel.set("canGoNext", function() {
        return viewModel.get("currentIndex")() < viewModel.get("stepModels").length - 1;
    });
    
    viewModel.set("goNext", function() {
        if (viewModel.get("canGoNext")()) {
            viewModel.set("currentStep",viewModel.get("stepModels")[viewModel.get("currentIndex")() + 1]);
        }            
    });
    
    viewModel.set("canGoPrevious", function() {
        return viewModel.get("currentIndex")() > 0;
    });
    
    viewModel.set("goPrevious", function() {
        if (viewModel.get("canGoPrevious")()) {
            viewModel.set("currentStep", viewModel.get("stepModels")[viewModel.get("currentIndex")() - 1]);
        }            
    });
    
    return viewModel;
}

kendo.bind($("#view"), new ViewModel());