在SPA中使用基于Knockout的视图保持元素

时间:2014-11-17 02:40:13

标签: javascript jquery jquery-ui knockout.js sammy.js

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

问题在于交换视图时,仪表和图表在进入视图之前不会加载,基本上是#34;毁坏"动画体验。首先加载视图时,正确加载内容。我是否需要使用某种自定义绑定,或者如何修复它以便在Web应用程序上查看之前正确加载图表和仪表。我已将代码加载到JSFiddle here.

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

我的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);

1 个答案:

答案 0 :(得分:0)

我找到了解决问题的方法。虽然不完美。如果我找到更好的方法,我会更新答案。它不会在动画后加载。你可以看到结果here.基本上只是添加了一个来自敲除绑定处理程序的回调来初始化聊天和量表。

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