Corrado's Blog 2.0

Online thoughts of a technology funatic

MvvmStack for WinJS: Services persistence

While refactoring MvvmStack for WinJS code i noticed that I did not show how to persist the state of the services when the app get suspended, so i checked in a new version that persist the data contained inside imageService.js (in a real world app, the data will probably come from a remote server).

The strategy I use is to let the services that need to keep their state add themselves to a services collection exposed by applicationControllerBase object that is passed to each service instance:

(function (winjs, applicationController) {
    var images = [];
    var cachedId;
    var imageService = {
        load: function (id) {
            return new winjs.Promise(function (c, e) {
                //Returns cached images when available
                if (cachedId == id && images.length > 0) {
                } else {
                    cachedId = id;
                    if (id == 1) {
                        images = [
                            { uri: "/images/data/Photo1.jpg", title: 'Photo 1' },
                            { uri: "/images/data/Photo2.jpg", title: 'Photo 2' },
                            { uri: "/images/data/Photo3.jpg", title: 'Photo 3' },
                            { uri: "/images/data/Photo4.jpg", title: 'Photo 4' },
                            { uri: "/images/data/Photo5.jpg", title: 'Photo 5' }];
                    } else {
                        images = [
                            { uri: "/images/data/Photo6.jpg", title: 'Photo 6' },
                            { uri: "/images/data/Photo7.jpg", title: 'Photo 7' },
                            { uri: "/images/data/Photo8.jpg", title: 'Photo 8' }];

        serialize: function () {
            return {
                images: images,
        hydrate: function (state) {
            images = state.images;
            cachedId =;

    winjs.Namespace.define("Demo.Services", {
        imageService: imageService

})(WinJS, Demo.Application.ApplicationController)

As you see in code above the service also exposes the same methods serialize and hydrate we met when speaking about viewmodels that serialize and deserialize service state to/from a json object.

Once we registered and added these functions, the task of invoking them when needed is contained inside Mvvm Stack’s common peristenceService.js

Here’s a fragment of serializaion code:

 //De-Serializes services that implements serialize function
            var j = 0;
   (service) {
                if (service.hydrate !== undefined) {
                    var serviceKey = "service" + j;
                    var serviceState =[serviceKey];

No rocket science, but it makes stack more complete and usable in real production code.

No Responses to “MvvmStack for WinJS: Services persistence”

RSS feed for comments on this post. TrackBack URL

Leave a Response