javascript - 在 SPA 中保持元素加载基于 knockout 的 View

Question

我在使用当前的 Knockout.js viewModel 结构加载元素时遇到问题。我正在使用 Sammy.js 将 URL 映射到 View 和 jqueryUI，以便向网站添加一些动画。我加载“正常”元素没有问题，但在这个应用程序中我需要使用图形和图表。我正在使用 Chartist.js 和 JustGage.js。另外我应该注意，我使用 Parse 作为数据库。

问题是，当交换 View 时，仪表和图表在进入 View 之前不会加载，本质上“破坏”了动画体验。当首先加载 View 时，内容会被正确加载。我是否需要使用某种自定义绑定(bind)，或者如何修复此问题，以便在网络应用程序上查看之前正确加载图表和仪表。我已将代码加载到 JSFiddle here.

我创建了一个变量startView，以便可以轻松更改首先加载的 View 。

我的KO绑定(bind)如下:

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.基本上只是添加了来自 knockout 绑定(bind)处理程序的回调，用于初始化聊天和仪表。

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