SPA에서 녹아웃 기반보기로 요소로드 유지

Question

현재 Knockout.js viewModel 구조를 사용하여 요소를로드하는 데 문제가 있습니다. 웹 사이트에 애니메이션을 추가하기 위해 Sammy.js를 사용하여 URL을 뷰에 매핑하고 jqueryUI를 사용하고 있습니다. "정상적인"요소를로드하는 데 문제가 없지만이 응용 프로그램에서는 그래프와 차트를 사용해야합니다. Chartist.js와 JustGage.js를 사용하고 있습니다. 또한 필자는 Parse를 데이터베이스로 사용하고 있음에 유의해야합니다.

문제는 뷰를 교체 할 때 게이지와 차트가 표시되기 전에로드되지 않아 본질적으로 애니메이션 경험을 망칠 수 있다는 것입니다. 뷰가 먼저로드되면 내용이 올바르게로드됩니다. 어떤 종류의 사용자 정의 바인딩을 사용해야합니까, 아니면 차트와 게이지가 웹 응용 프로그램에서보기 전에 올바르게로드되도록 고정시킬 수 있습니까? 내 코드를 JSFiddle에로드했습니다. here.

먼저로드 된 뷰를 쉽게 변경할 수 있도록 변수 startView를 만들었습니다. 나는 내 문제에 대한 해결책을 알아 낸

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

다음과 같이 내 KO 바인딩

이다. 하지만 완벽하지는 않습니다. 더 좋은 방법을 찾으면 답을 업데이트 할 것입니다. 애니메이션 직후에로드되지 않습니다. 결과는 here.입니다. 기본적으로 채팅 및 게이지를 초기화하는 녹아웃 바인딩 처리기의 콜백 만 추가되었습니다.

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