Problem Binding to Data Source after ViewModel Changes - Javascript Error: Object has no method 'unbind'

[Mike]

Hello –

In an attempt to keep our Data and Business Logic on the server, we are generating our ViewModel data on the server and transporting them to the browser via using JSON. Once received, we extend that data onto a kendo.observable object using jquery's extend() method and then bind that to our DOM using the kendo.bind method. When we change the value of any input, we refresh the ViewModel by sending it back to the server. The server processes or commits any changes that it detects and sends us an updated ViewModel with any updated data/results. Yes, we realize that sending the entire ViewModel back, instead of just what changed could be considered inefficient, but we’re still in Proof-of-Concept mode.

The Problem

For the most part, our methodology seems to be working on all properties using simple data types (e.g. string, integer, decimals, etc). However, once we start introducing collections (or arrays), we start running into issues.

Scenario 1 – It Works!

Code can be seen and run at this JS Fiddle:
http://jsfiddle.net/mikejoseph23/QuGgy/

Since interacting with a web service would be tricky using, JS Fiddle, I’m emulating the same thing that’s happening by creating 3 different sets of data which represents ViewModels being pulled from the server in JSON format. The Refresh button simply cycles through them, but once implemented, this method would be requesting an updated ViewModel data set on the server based on any changes passed in.

// This data would be normally retrieved 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"

}

Pressing the Refresh button works as expected. I can rebind to an updated viewModel (kendo observable) object with no problem.

$.extend(viewModel, data);

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

Scenario 2 – FAIL!

Code can be seen and run at this JS Fiddle:
http://jsfiddle.net/mikejoseph23/wcPNp/

In this next sample, I changed the ViewModel data to use the following structure instead and instead of binding to individual input elements, I’m binding to a select dropdown.

// 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 data2 = {

    "Set": "3",

    "Destinations": ["Las Vegas, NV", "Grand Cayman", "Seattle, WA"]

}

The first press of the Refresh button works as expected, but the second press gives me the following error in Chrome:

Kendo.all.min.js:11
Uncaught TypeError: Object Negril, Jamaica,Cancun, Mexico,Key West, FL has no method 'unbind'

I can’t figure out why! Any help or advice would be greatly appreciated!

Thanks!!

[Mike]

We found a solution to this, so thought I'd share.

Here's an updated JSFiddle:
http://jsfiddle.net/mikejoseph23/B2TN6/3/

The problem was that the JSON data that we were retrieving from the web service needed to be observable. So we changed this:

$.extend(viewModel, data);

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

To this:

var vm2 = kendo.observable(data);

$.extend(viewModel, vm2);

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

Hope this helps someone out someday.

Mike

PS - In case the fiddles ever disappear, I attached the source in an HTML file.