여러보기 모델로 작업하는 knockoutj

Question

jQueryMobile에서 작동하는 Knockout js를 얻으려는 중이고 페이지 간을 이동할 때 몇 가지 문제가 발생합니다.

JQM에서 페이지 전환을 유지하고 싶습니다. 따라서 다중 페이지 옵션 (하나의 html 파일에 정의 된 여러 페이지)을 사용하거나 기본 AJAX에서 자세하게 설명 된대로 DOM에 추가 페이지를로드하고 싶습니다. 행동 섹션을 참조하십시오.

JQM Page Transition Documentation

나는 각 별도의 뷰 모델을 모두 작업이 개별 Knockoutjs 페이지를 가지고있다. 두 페이지는 JQM을 통해 링크를 시도 할 때까지 완벽하게 작동합니다.

로드하려고하는 페이지가 다른 페이지의 매핑과 관련된 오류가 발생합니다. 나는 두 페이지가 단일 DOM에로드되고 Knockout이 바인딩을 적용 할 때 존재하지 않는 속성을 찾고 있다고 가정 할 수 있습니다.

나는 그것을 입증하기 위해 jsFiddle을 만들려고 시도했다.

JQM - Knockout Fiddle

나는 모두 JQM에 새로운 오전 녹아웃 그래서 어떤 도움에 감사드립니다. 만약 내가 완전히 잘못된 접근법을 택한다면 나는 올바른 방향으로 나를 가리키는 누군가를 높이 평가할 것입니다.

전체 사이트에 하나의 ViewModel을 사용하는 것이 더 좋을까요? JQM과 함께 Knockoutjs를 어떻게 사용할 수 있습니까?

Answer 1

전체 사이트에 대한 하나의 "마스터"뷰 모델을 사용할 수 있습니다. 개인적으로

ko.applyBindings(new modelOne("Test", "One"), $("#one")[0]); 
ko.applyBindings(new modelTwo("Test", "Two"), $("#two")[0]); 

, 내가 좋겠 :

var masterViewModel = { 
    viewModelOne: ..., 
    viewModelTwo: ... 
} 

다른 방법을, 당신은 .applyBindings 오히려 전체 DOM보다, 개별 요소에 바인딩을 적용 과부하 호출 할 수 있습니다 다음, 당신이 뭔가를 할 수 있습니다 두 번째 방법을 권장합니다.

Answer 2

저는 현재 jQuery Mobile 1.3.1과 Knockout 2.2.1을 사용하고 있으며,이 문제에 대한 (희망적으로) 영구적 인 해결책을 찾기 전에 많은 접근법을 시도했습니다. 어려운 부분은 바인딩을 적용 할 때 을 알아내는 것입니다. jQuery의 준비 함수를 사용할 때 작동하지 않았습니다. 나는 jQM documentation에서 문서 준비 함수 대신 pageinit 이벤트 콜백에 바인딩하는 것을 발견했습니다. 그러나이 콜백은 페이지가 처음으로 렌더링 될 때마다 해제됩니다. 따라서 5 개의 jQM 페이지가있는 경우 5 회 발생하고 한 번만 KO 바인딩을 적용해야합니다.

나는 결국 사용되는 솔루션은 다음이었다

이

$(document).bind('pageinit', function (e) { 
    var pageId = e.target.id; 

    for (var i in VIEW_MODELS) { 
     var vm = VIEW_MODELS[i]; 
     if (pageId == vm.View) { 
      ko.applyBindings(vm, document.getElementById(vm.View)); 
     } 
    } 
}); 

이것이하고있는 것은 JQM 페이지가 처음 렌더링 될 때마다, 그것은 곧 뷰와 관련된 뷰 모델을 찾을 수 내보기 모델을 통해 검색 바인딩을 적용합니다. 페이지는 처음 렌더링 될 때만 초기화되므로 처음 렌더링시 ko 바인딩을 적용하고 다시는 적용하지 않습니다.

지금까지는 이것이 저에게는 효과적 이었지만 다른 사람들의 의견이나 솔루션을 사용하여 jQM 다중 페이지 템플릿을 녹아웃으로 사용하는 것에 대해 궁금합니다.