How to bind a Knockout js model to a wizard style UI

http://stackoverflow.com/questions/7428677/how-to-bind-a-knockout-js-model-to-a-wizard-style-ui

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.1/video-js.css">
<div id="assessmentIntroPanel" data-bind="with: currentStep">
    <div data-bind="video: videos, playerId: 'videoPlayer'">
        <video id="videoPlayer" class="video-js vjs-default-skin" width="430" height="267">
        </video>
    </div>
</div>

<hr/>

<button data-bind="click: goPrevious, enable: canGoPrevious">Previous</button>
<button data-bind="click: goNext, enable: canGoNext">Next</button>

JavaScript

ko.bindingHandlers.video = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var videoSources = ko.utils.unwrapObservable(valueAccessor()).videos,
        playerId = allBindingsAccessor().playerId,
        options = { loop : true, controls: true, autoplay: true, preload: "auto" };
    
    videojs(playerId, options, function(){
      var video = this;
      video.src(videoSources).load().play();
    });
  },
  
  update: function(element, valueAccessor, allBindingsAccessor) {
    var videoSources = ko.utils.unwrapObservable(valueAccessor()).videos,
        playerId = allBindingsAccessor().playerId,
        video = videojs(playerId);
    
    video.src(videoSources);
  }
};

function Step(id, videos) {
   var self = this;
   self.id = id;
   self.videos = ko.observable(videos);   
}

function ViewModel() {
    var self = this;
    self.stepModels = ko.observableArray([
        new Step(1, { videos : [
                { "src":"\\10.2.2.221\FileStore\VideoConverted\12\15\0B\40\12150B40CD272B4733AA2537F2F9E113274B8F6F.mp4", "type":"video/mp4" },
                { "src":"http://s3.amazonaws.com/nJSBucket/MP4/SSR.ogv", "type":"video/ogg" },
                { "src":"http://s3.amazonaws.com/nJSBucket/MP4/SSR.webm","type":"video/webm" }
            ]}),
        new Step(2, { videos:[
                { "src":"http://s3.amazonaws.com/nJSBucket/MP4/AUD2.ogv", "type":"video/ogg" },
                { "src":"http://s3.amazonaws.com/nJSBucket/MP4/AUD2.webm","type":"video/webm" },
                { "src":"http://s3.amazonaws.com/nJSBucket/MP4/AUD2.mp4", "type":"video/mp4" }
            ] })
    ]);
    
    self.currentStep = ko.observable(self.stepModels()[0]);
    
    self.currentIndex = ko.dependentObservable(function() {
        return self.stepModels.indexOf(self.currentStep());    
    });

    self.canGoNext = ko.dependentObservable(function() {
        return self.currentIndex() < self.stepModels().length - 1;
    });

    self.goNext = function() {
 ...