Сохранение элементов, загруженных с помощью нокаута, в SPA

Question

У меня возникли проблемы с загрузкой элементов, используя мою текущую структуру отображения Knockout.js. Я использую Sammy.js для сопоставления URL-адресов с представлениями и jqueryUI, чтобы добавить некоторые анимации на сайт. У меня нет проблем с загрузкой «нормальных» элементов, но в этом приложении мне нужно использовать графики и диаграммы. Я использую для них Chartist.js и JustGage.js. Также я должен отметить, что я использую Parse в качестве базы данных.

Проблема заключается в том, что при замене взглядов датчики и диаграммы не загружаются, прежде чем приходить в поле зрения, по существу «разрушая» опыт анимации. Когда сначала загружается представление, содержимое загружается правильно. Нужно ли использовать какую-то пользовательскую привязку, или как это можно зафиксировать, чтобы диаграммы и датчики загружались правильно, прежде чем их просматривать в веб-приложении. Я загрузил свой код в JSFiddle here.

Я сделал переменную startView, так что сначала можно легко изменить загружаемое представление.

связывания My KO выглядит следующим образом:

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

я понял, решение моей проблемы. Не идеально. Если я найду лучший способ, я обновлю ответ. Он загружается не сразу после анимации. Вы можете увидеть результат here. В основном добавлен обратный вызов от обработчика привязки нокаута, который инициализирует чат и датчики.

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