knockout.js 초기화 중에 어떻게 "로더"를 표시 할 수 있습니까?

Question

나는 knockout.js와 jQuery Mobile로 빌드 된 단일 페이지 웹 앱을 가지고있다.

뷰 모델 초기화 (즉, ko.applyBindings() 함수)는 약 7-8 초가 걸립니다. 이 시간 동안 페이지에 아무 것도 표시되지 않습니다.

$(document).ready(function() { 
    ko.applyBindings(viewModel); 
}) 

그 동안의 JQM 로더를 보여, 또는 사용자에게 "페이지가로드되는"하는 피드백을 제공하기 위해, "시작 화면"의 종류를 표시하는 방법이 있나요?

@Jeroen이 제안한 해결책은 적어도 in this jsfiddle처럼 jQuery Mobile의 기본 페이지 전환과 함께 사용하는 것이 좋습니다.

솔직히 @Omar가 제안한 팁은 JQM과의 통합이 더 잘되어있는 것처럼 보입니다. 앞으로 JQM 로더를 켜고 끌 수있는 쓰기 가능한 계산 된 관찰 가능 기능을 사용하여 두 답변을 결합하려고 노력할 것입니다.

Answer 1

간단하게 유지하십시오! 기본적으로 HTML에로드 오버레이를 표시하지만 visible: false 바인딩을 사용합니다. 그러면 applyBindings 호출이 완료되면 UI가 오버레이를 숨 깁니다. 그런 다음이 전화

vm = { loading: ko.observable(true) }; 

: 예를 들어

이보기 가정 :

<div id="main"> 
    <div id="loading-overlay" data-bind="visible: loading"></div> 
    Some content<br /> 
    Some content 
</div> 

을 그리고이보기 모델을 가정

는

ko.applyBindings(vm); 

어떤 이유는 7 초 걸린다면 로드하려면 UI가 업데이트 될 때까지로드 오버레이가 표시됩니다. 성공과 실패에 대한 콜백와

1. vm.loading(true)
2. Ajax 호출 : 당신은 Ajax 호출을 실행하는 클라이언트 측 DAL 또는 어떤 한 지점이있는 경우이 패턴을 따를 수 있기 때문에

   이 방법은, 중대하다 콜백에

3. 는 vm.loading(false)

개편, 당신을 위해 오버레이 가시성을 처리 할.

는 데모 this fiddle를 참조하거나이 스택 코드 조각을 체크 아웃 :

vm = { loading: ko.observable(true) }; 
 

 
ko.applyBindings(vm); 
 

 
// Mock long loading time: 
 
window.setTimeout(function() { 
 
    vm.loading(false); 
 
}, 5000);

html { height: 100%; } 
 

 
body { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#loading-overlay { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: url('http://img.cdn.tl/loading51.gif') white no-repeat center; 
 
    opacity: 0.75; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div id="main"> 
 
    <div id="loading-overlay" data-bind="visible: loading"></div> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    <input type='text' value='cant edit me until overlay is gone' /><br /> 
 
    <button>can't press me until overlay's gone!</button><br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content 
 
</div>