Kendo MVVM - Binding from different Data Sources - using arrays

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:</label>
    <select data-bind="source: Destinations"></select>
  </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 = {
		"Set": "1",
		"Destinations": ["Negril, Jamaica", "Cancun, Mexico", "Key West, FL"]
	}

	var data2 = {
		"Set": "2",
		"Destinations": ["San Diego, CA", "Baja, Mexico", "Maui, HI"]
	}

	var data3 = {
		"Set": "3",
		"Destinations": ["Las Vegas, NV", "Grand Cayman", "Seattle, WA"]
	}

	function SetupKendoViewModel(data) {
		viewModel = kendo.observable({
			displayAllDestinations: function () {
				return JSON.stringify(this.Destinations);
			}
		});

    var vm2 = kendo.observable(data);
		$.extend(viewModel, vm2);
		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 == 4) currentViewModel = 1;
	}