여러 독립보기를 사용하는 Knockout.js 응용 프로그램을 구성하는 방법은 무엇입니까?

Question

하나가 인 경우 Knockout.js를 사용하는 방법은 분명합니다.

서로 독립적 인 여러보기가있는 경우 어떻게 응용 프로그램을 구성합니까? 뷰 당 뷰 모델 (물론 보기 모델의 의미이므로)을 가지고 있어야하지만 HTML 파일을 구성 요소로 분할하는 방법은 무엇입니까?

예를 들어,보기를 정의하기 위해 자체 파일에 HTML 스 니펫이 있고 싶습니다. index.html에는 이러한보기를 추가 할 위치에 대한 자리 표시 자만 있습니다.

내가 Knockout.js이 지원하지 않는 것을 상상할 수는 없지만, (TodoMVC의 샘플과 마찬가지로) 내가 지금까지 항상있는 모든 예제는 하나 개의보기이었다.

하나의 큰 HTML 파일을 각보기마다 하나씩 여러 파일로 나누고 Knockout.js를 사용하여 결합하는 방법은 무엇입니까?

Answer 1

아, 쉽습니다. Knockout JS의 applyBindings 메소드는 선택적 DOM 요소를 두 번째 매개 변수로 허용합니다. 당신은 같은 것을 할 수있는 경우에 그래서 :

ko.applyBindings(myViewModel, 
    document.getElementById('myModuleWrapperDiv')); 
ko.applyBindings(otherViewModel, 
    document.getElementById('otherModuleWrapperDiv')); 

을 유일한 캐치는 하나의 DOM 하위 트리에 두 개의 뷰 모델에서 믹스 앤 매치 바인딩 할 수 없을 것입니다. 예를 들어이 마크 업 작동합니다 :

<div id="myModuleWrapperDiv"> 
    ... 
</div> 
<div id="otherModuleWrapperDiv"> 
    ... 
</div> 

이, 그러나 않을 것 : 나는 녹아웃으로 위젯을 어떻게

<div id="myModuleWrapperDiv"> 
    ... 
    <div id="otherModuleWrapperDiv"> 
     ... 
    </div> 
</div> 

---

가 여기에 있습니다. 95 %의 경우 템플릿을로드하고 바인딩을 적용하는 것이 좋습니다. 그러나 포장 된 위젯 (즉, 개별 구성 요소로 출시 할 항목)이 필요한 경우 맞춤 바인딩으로 포장하는 것이 가장 좋은 방법입니다. Angular JS는 지시어로 유사한 접근법을 권장합니다.

1. 위젯의 디자인 마크 업을 문서 조각으로 사용합니다. 원하는 모든 것을 할 수 있습니다 : 간단한 HTML 조각, 자리 표시 자 div과 JavaScript의 모든 렌더링 및 상호 작용 - 모든 것이 가능합니다.

2. 템플릿의보기 모델을 디자인하십시오. 위젯이 렌더링하고 운영하고 모델을 작성하는 데 필요한 데이터를 생각해보십시오.

3. 위젯의 맞춤 바인딩을 만듭니다. 가장 단순한 것은 자리 표시 자 div 요소에있을 것입니다.

   a. init 메소드는 템플릿을로드하고 내부 위젯 뷰 모델의 바인딩을 템플릿에 적용해야합니다. 바인딩이 적용되면 결과 문서 조각을 자리 표시 자 div에 추가 할 수 있습니다.

   b. 업데이트 메소드는 사용자 정의 바인딩 속성 매개 변수를 통해 제공된 값을 기반으로 내부 뷰 모델의 상태를 변경해야합니다.