Kendo MVVM - Binding from different Data Sources

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.metro.min.css">
<div id="view">
  <div class="formrow">
    <label>Destination 1:</label>
    <input data-bind="value:Destination1" />
  </div>

  <div class="formrow">
    <label>Destination 2:</label>
    <input data-bind="value:Destination2" />
  </div>

  <div class="formrow">
    <label>Destination 3:</label>
    <input data-bind="value:Destination3" />
  </div>

  <p><label>All Destinations:</label> <span data-bind="text: displayAllDestinations" /></p>
</div>


<p>
  <input type="button" onclick="RefreshViewModel()" value="Refresh" />
</p>

CSS

.formrow, p { margin: 10px }
input[type=button] { padding: 5px }

JavaScript

var viewModel;
	var currentViewModel = 1;

	// This data would be normally retreived via web service
	var data1 = {
		"Destination1": "Negril, Jamaica",
		"Destination2": "Cancun, Mexico",
		"Destination3": "Key West, FL"
	}

	var data2 = {
		"Destination1": "San Diego, CA",
		"Destination2": "Baja, Mexico",
		"Destination3": "Maui, HI"
	}

	var data3 = {
		"Destination1": "Las Vegas, NV",
		"Destination2": "Grand Cayman",
		"Destination3": "Seattle, WA"
	}

	function SetupKendoViewModel(data) {
		viewModel = kendo.observable({
			displayAllDestinations: function () {
				return this.Destination1 + " | " + this.Destination2 + " | " + this.Destination3;
			}
		});

		$.extend(viewModel, data);
		kendo.bind($("#view"), viewModel);
	}

	function RefreshViewModel() {
		var dataToUse;

		if (currentViewModel == 1) {
			dataToUse = data1;
		}
		else if (currentViewModel == 2) {
			dataToUse = data2;
		}
		else {
			dataToUse = data3;
		}

		SetupKendoViewModel(dataToUse);

		currentViewModel++;
		if (currentViewModel == 5) currentViewModel = 1;
	}