Keeping Elements Loaded With Knockout Based Views in a SPA

Question

I'm having trouble loading elements using my current Knockout.js viewModel structure. I am using Sammy.js to map URLs to the views and jqueryUI in order to add some animations to the website. I have not problem loading "normal" elements, but in this application I need to use graphs and charts. I am using Chartist.js and JustGage.js for those. Also I should note that I'm using Parse as a database.

The problem is when swapping views the gauges and charts will not load before coming into view, essentially "ruining" the animation experience. When the view is loaded first, the content is loaded correctly. Do i need to use some sort of custom binding, or how can this be fixed so that the charts and gauges are loaded correctly before being viewed on the web app. I have loaded my code into JSFiddle here.

I made a variable, startView so that the view that is loaded first can be changed easily.

My KO binding is as follows:

var View = function (title, templateName, data) {
    var self = this;
    this.title = title;
    this.templateName = templateName;
    this.data = data;
};

var dashboardView = {
    //ko.observables here...
};

//viewModel which consists of multiple subviews
var viewModel = {
    views: ko.observableArray([
    new View("Dashboard", "dashboard", dashboardView),
    selectedView: ko.observable()        
};
//Apply knockout bindings
ko.applyBindings(viewModel);

Answer 1

I have figured out a solution to my problem. Not perfect though. If I find a better way I'll update the answer. It loads not right after the animation. You can see the result here. Basically just a callback from the knockout binding handler has been added that initializes the chat and gauges.

if (next === "dashboard") {
    transition.left($element, getTemps);
} else if (next === "temperaturehistory") {
    transition.left($element, getTemps);
}
else {
    transition.left($element);
}