Terje Nygård February 2016

Knockout : Observable with Observables inside only updating in UI, but unchanged when passed to the server?

I have this observable object, which has two observable properties inside :

self.matchModel = ko.observable();

The Model looks like this :

function toKnockOutObservable(data) {
    return {
        Id: data.Id,
        TeamId: data.TeamId,
        TeamName: data.TeamName,
        OpponentName: data.OpponentName,
        LocationName: data.LocationName,
        MatchDate: data.MatchDate,
        LiveScoreActivated: data.LiveScoreActivated,
        TeamScore: ko.observable(data.TeamScore),
        OpponentScore: ko.observable(data.OpponentScore)
    };
}

The way i'm changing the data on the observable :

 self.AddScoreToOpponentTeam = function () {
        self.matchModel().TeamScore(self.matchModel().TeamScore() + 1);
        taskHub.server.updateLiveScore(self.matchModel());
    }

The Problem :

The Knockout model is updated in the UI, and everything seems fine, but... when i'm passing the observable object to the server it hasn't changed at all.. (matchModel is the same as it was when first loaded)..

Code which updates an observable property on the observable object : self.matchModel().TeamScore(self.matchModel().TeamScore() + 1);

So... what am i actually doing wrong here ?


Updated : 09.02.2016 : 09:15 to show more code :

Getting data filling knockout model with it :

var url = 'api/MainPage/GetMatchById?matchId=' + matchId;

$.post(url,
    function (data) {
        model.livematch(data);
        console.log(data);
        model.matchModel(toKnockOutObservable(data));
    }, 'json');

ko.applyBindings(model, document.getElementById("livematch"));

Filling knockout model with data :

function toKnockOutObservable(data) {
    return {
        Id: data.Id,
         

Answers


Terje Nygård February 2016

Well.. the solution to the problem here is quite easy, yet.... quite hard to find due to the not-to-easy-to-understand documentation on this topic..

Almost like understanding hieroglyphics in ancient Egypt..

The thing is... that an Observable object with observable properties consists of functions that hold the new values you change.. In my case.. the TeamScore..

No matter how you console.log and debug this through browser debugging it all seems correct, yet.. when you pass the observable object to the server... you won't get the updated data, since this is based on functions (which... is the observable properties inside the observable object)..

So... when reading about serialization and deserialization in the documentation, i came to understand that i needed to serialize the object before i sent it to the server, since the values.. was stored in the observable functions..

So the following code example solved this for me :

var LiveMatchViewModel = function() {
    var self = this;
    self.livematch = ko.observable();
    self.matchModel = ko.observable();

    self.AddScoreToHomeTeam = function () {
        self.matchModel().TeamScore(self.matchModel().TeamScore() + 1);
        var data = ko.toJSON(self.matchModel());
        taskHub.server.updateLiveScore(data);
    }

Take remark of the ko.toJSON(self.matchModel())..

This serializes and stores the changed observables back to the object, generates the JSON and can easilly be passed back as a JSON string to the server..

VOILA!... Problem solved...

Post Status

Asked in February 2016
Viewed 3,704 times
Voted 5
Answered 1 times

Search




Leave an answer