Load MVVM data from JSON in nested viewmodels

[Casablanca]

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);
}())

[Martin]

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