This is a migrated thread and some comments may be shown as answers.

Map Server Side data to Kendo MVVM view model

6 Answers 267 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 08 Jul 2013, 06:23 PM
Is there any way to get server side data passed into a view into a Kendo MVVM view model? Like with knockoutjs, we use the "ko.mapping" plugin... is there a way to define how to populate a view model with a given JSON object? Or the behaviors, etc?

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 10 Jul 2013, 11:34 AM
Hello Stacey,

I am afraid that Kendo MVVM does not provide a build-in mapping functionality. Populating/updating the ViewModel should be done manually on success of the $.ajax request using the set method of the observable object.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacey
Top achievements
Rank 1
answered on 11 Jul 2013, 04:21 PM
Perhaps let me rephrase the question.

How versatile is the ability to map incoming JSON data to Kendo UI MVVM view models? Is it limited to very flat data, or can it be controlled? For example, if I had a situation like this ..


 Id : "someid",
 Name : "SomeName",
 Properties : [
   { 
    "Id" : "SomePropertyId",
   "Name" : "SomePropertyName"
  }
]
}

As the data, is it possible to map the properties field to an actual MVVM object in the view model? Or would it have to always be a nebulous Javascript construct that could not have objective functions or properties?

In other words, there is a strong difference between... 

viewModel.Properties.Push(someJavascriptObject);

and 

viewModel.Properties.Push(new Property(someJavascriptObject.Id, someJavascriptObject.Name);


I can currently do this in KnockoutJS, and it is a very key part of setting up view models (especially "edit" view models) - and I need to know if this is feasible with Kendo.
0
Alexander Valchev
Telerik team
answered on 15 Jul 2013, 08:36 AM
Hi Stacey,

Kendo MVVM supports nested data. Each object/array added to the ViewModel is automatically transformed into ObservableObject/Array. Each JavaScript object pushed in Observable array is automatically transported into observable as well.

The following code will add new object to the "Properties" array, but will not remove the old one.
viewModel.Properties.Push(someJavascriptObject);

If you would like to replace the old element you should use another approach such as the splice method.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacey
Top achievements
Rank 1
answered on 19 Jul 2013, 02:22 PM
This still does not answer my question. The new object added to the array may be an observable object, but is it possible to specify what "kind" of observable object - for the sake of having methods and such that are related to it? For instance, consider the pseudo code...

function Item(args) {
  Id
 Name
 function Remove( args ) {
     // remove this item
 }
}

viewModel.Items.Add(new Item(data));
 is very fundamentally different than just 
viewModel.Items.Push(someJavascriptObject);
is very, very different than just adding a new object, because "remove" may have very specific logic in it that is unique to the specific instance of Item created. I can currently do this in every other MVVM framework, but it doesn't appear as if it is possible in Kendo's MVVM. 

Is there any way around this? Or any plans to improve on mapping data?
0
Stacey
Top achievements
Rank 1
answered on 19 Jul 2013, 02:37 PM
You guys really ought to look at the mapping plugin for knockout. This is a feature that makes Kendo's MVVM very hard to get into, because the convenience of mapping is just too amazing. 

http://knockoutjs.com/documentation/plugins-mapping.html
0
Alexander Valchev
Telerik team
answered on 23 Jul 2013, 09:09 AM
Hi Stacey,

Thank you for the feedback.
Regarding objects added to the array, you can use both syntaxes:

viewModel.data.push({ foo: 2 });
viewModel.data.push(new Obj({ foo: 3 }));

Here is a small example:
Although that the syntax is flexible, I would recommend you to use only one approach for consistency.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Stacey
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Stacey
Top achievements
Rank 1
Share this question
or