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

Load MVVM data from JSON in nested viewmodels

1 Answer 181 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Casablanca
Top achievements
Rank 1
Casablanca asked on 23 Mar 2017, 08:03 AM

I've created 2 viewmodel with typescript, like mentioned here.
Both viewmodels have their own properties an functions. 

Now i want to load the viewmodel data from a json object comming from an ajax request.
I found a thread where this is done by $.extend which works quite good for data.
But how can i extend the nested viewmodel wth data and keep their functions?

Like in the example below "RoomOffer1ViewModel" does'nt have a function "bar" after $.extend

class Offers1ViewModel extends kendo.data.ObservableObject {
    RoomOffers: Array<RoomOffer1ViewModel>;
 
    constructor() {
        super();
        super.init(this);
        this.RoomOffers = [];
    }
 
    foo() {
        // do something
    }
}
 
class RoomOffer1ViewModel extends kendo.data.ObservableObject {
    Property1: string;
    Property2: number;
 
    constructor() {
        super();
        super.init(this);
    }
 
    bar() {
        // do something for "RoomOffer1ViewModel"
    }
}
 
(function () {
    // imagine the data below comes from an ajax request
    var jsonFromServer = {
        RoomOffer: [
            { Property1: "some", Property2: 1 },
            { Property1: "data", Property2: 2 },
            { Property1: "from", Property2: 3 },
            { Property1: "server", Property2: 4 }
        ]
    }
 
    var myViewModel = new Offers1ViewModel();
 
    $.extend(true, myViewModel, kendo.observable(jsonFromServer));
 
    kendo.bind($("body"), myViewModel);
}())

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 24 Mar 2017, 11:50 AM
Hello,

You will have to initialize your inner view model objects before extending each of them. Something similar to this:

(function () {
    // imagine the data below comes from an ajax request
    var jsonFromServer = {
        RoomOffer: [
            { Property1: "some", Property2: 1 },
            { Property1: "data", Property2: 2 },
            { Property1: "from", Property2: 3 },
            { Property1: "server", Property2: 4 }
        ]
    }
 
    var roomOffers = [];
    $.each(jsonFromServer.RoomOffer, function () {
        var curr = new RoomOffer1ViewModel();
        $.extend(true, curr, kendo.observable(this));
        roomOffers.push(curr);
    });
 
    var myViewModel = new Offers1ViewModel();
    myViewModel.set("RoomOffers", roomOffers);
 
    kendo.bind($("body"), myViewModel);
} ());

I hope this helps.

Regards,
Martin
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MVVM
Asked by
Casablanca
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or