모달의 내용에 대한 템플릿을 프로그래밍 방식으로 삽입

Question

기본 ViewModel과 내보기가 훌륭하고 일부 복잡한 흐름이있는 모달 창 (fancybox)이 있습니다 (해당 모델 내에서 3 단계를 거치므로).

이제 기본 ViewModel을 염려하지 않고 새로운 ViewModel을 만들었습니다. 따라서 MainViewModel, ModalViewModel으로 각각 전화를 걸 수 있습니다.

원래 몇 개의 템플릿을 통해 기본보기에 모달보기를 삽입하려고했으나 내용으로 가져올 fancybox를 가져옵니다. 그러나이 방법은 중복 된 요소 ID가 중복 될 수 있으므로 위험 할 수있는 중복 된 dom 요소가있을 것입니다.

그래서 저는 템플릿을 삽입하기 위해 아약스를 사용하는 방법을 찾아야한다고 생각했습니다. fancybox 창.

그냥 흐름을 요약합니다 :

1. 사용자는
2. 사용자가 모달
3. 사용자의 양식을 채우고 모달 창을 생성합니다 모달
4. 에 제출을 클릭
5. 사용자가 클릭 연결 기본보기를 입력 사용자가 모달 형식의 두 번째 단계를 입력하십시오.
6. 사용자가 양식 2를 모달로 채 웁니다.
7. 사용자는
8. 사용자가

그래서 나는 이것에 대해 올바른 길을 가고 새 페이지로 전송되는 형태로 제출? 아니면 내가 MainViewModel 내에서 하위 viewModel로 ModalViewModel을 포함하고 그런 식으로 처리해야합니까?

Answer 1

템플릿의 ID 이름을 제어 할 수 있으므로 템플릿 ID의 이름을 고유하게 변경하면 안됩니다.

그리고 멀리 ModalViewModel에 결합하는 등이 같은 뷰 모델 수 : 다음

var MainViewModel = { 
    //other props 
    Modal : new ModalViewModel() 
}; 

을하고 그래서 같이 childViewModel 에 applybindings :

ko.applyBindings(MainViewModel.Modal); 

경우 전체 모달 뷰 ISN 템플릿을 사용하면 다음과 같은 오버로드를 사용합니다.

ko.applyBindings(MainViewModel.Modal,modalRootElement); 

Answer 2

모델을 주 뷰 모델의 하위 모델로 포함해야합니다.

KO의 패러다임은 하나의 뷰 모델/페이지를 갖는 것입니다.

fancybox에서 iframe을 사용하는 경우 두 가지보기 모델이 더 적합 할 수 있습니다 (그러나 두보기 모델간에 데이터를 동기화하는 측면에서 자체적 인 복잡성이 추가됩니다).