Map Server Side data to Kendo MVVM view model

7 posts, 0 answers
  1. Stacey
    Stacey avatar
    5 posts
    Member since:
    Jul 2013

    Posted 08 Jul 2013 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 10 Jul 2013 Link to this post

    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!
  3. Stacey
    Stacey avatar
    5 posts
    Member since:
    Jul 2013

    Posted 11 Jul 2013 Link to this post

    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.
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 15 Jul 2013 Link to this post

    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!
  5. Stacey
    Stacey avatar
    5 posts
    Member since:
    Jul 2013

    Posted 19 Jul 2013 Link to this post

    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?
  6. Stacey
    Stacey avatar
    5 posts
    Member since:
    Jul 2013

    Posted 19 Jul 2013 Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 23 Jul 2013 Link to this post

    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!
Back to Top