Load MVVM data from JSON in nested viewmodels

2 posts, 1 answers
  1. Casablanca Hotelsoftware
    Casablanca Hotelsoftware avatar
    6 posts
    Member since:
    Jan 2014

    Posted 23 Mar 2017 Link to this post

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

  2. Answer
    Martin
    Admin
    Martin avatar
    833 posts

    Posted 24 Mar 2017 Link to this post

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