보기 또는 ViewModel로로드 하시겠습니까?

Question

Durandal 2.0.1, Knockout 3.0.0, RequireJS 2.1.10을 사용하십시오.

내가 뷰 또는 뷰 모델로 하위 항목을로드할지 여부에 대한 근본적인 질문이 있습니다 :

다음

은 무대를 설정, 배경 정보입니다. Durandaljs 웹 사이트에 인쇄 된 디자인을 따르려고합니다. index.cshtml의 script 태그의 일부로 data.html을로드하는 application.host라는 div 요소가있는 index.cshtml 페이지가 있습니다.

내가 shell.html 안에, 내가 사용 HEADER.html 현재로드 사업부 그래서, 내 마크 업을 모듈화하는 것을 시도하고있다 : HEADER.html 현재 내부

<!-- ko compose: 'viewmodels/header' --> 
<!-- /ko --> 

을, 나는 성공적으로로드 할 수없는 다른 사업부가 guestSummary.html.

guestSummary (guestSummary.js) 용 ViewModel은 데이터를 검색하고 guest에 대한 몇 가지 통계를 표시합니다.이 통계는 knockout을 사용하여 guestSummary.html에 바인딩하려고 시도합니다.

때문에 데이터 조회 및 guestSummary.html의 컨트롤에 필요한 바인딩, 나는 내가 (HEADER.html 현재 내부) 다음 코드를 사용 guestSummary.html를로드해야합니다 생각 :

<!-- ko compose: 'viewmodels/guestSummary' --> 
<!-- /ko --> 

내가 (Google 크롬 개발자 도구의 콘솔 탭에서) "캐치 오류 : 구성된 모듈 (viewmodels/guestSummary)을로드하지 못했습니다. 세부 정보 : 모델이 정의되지 않았습니다."라는 오류 메시지가 표시됩니다.

Durandaljs 웹 사이트를 보면 "탐색 응용 프로그램의 각 페이지는 뷰와 뷰 모델로 구성되어 있습니다. 위에서 설명한대로 구조를 설정하면 응용 프로그램이 확장됩니다. view 폴더의 적절한 뷰와 함께 viewmodels 폴더에 새 뷰 모델을 놓은 다음 main.js.에있는 라우터에 등록합니다. 해당 경로를 탐색하면 라우터가 모듈과 컴포지션 인프라를 찾습니다 그것은 바인딩되어 DOM에 삽입 된 것을 볼 것입니다. "

위의 지침은 guestSummary.html 페이지로 이동하지 않으므로보기 모델 대신보기를 사용해야한다는 것을 나타냅니다. 모델을 추가해야 할 필요가없는 것 같습니다. 라우터와 저는 guestSummary.html 페이지로 이동하기 위해 라우터를 실제로 사용하지 않습니다.

guestSummary에 데이터와 데이터 바인딩이 필요하므로 guestSummary.html을 뷰로로드하고 $ parent (또는 $ parent.parent 등) 속성에 데이터 바인딩을로드하는 것이 좋을 것입니다. guestSummary.js 파일을 guestSummary.html 파일과 함께로드하고 두 파일을 VIEWMODEL로로드 하시겠습니까?

달성하려는 작업을 수행하는 더 좋은 방법이 있습니까? 도움을 주신다면 미리 공유해 주셔서 감사합니다.

Answer 1

자신의 뷰 모델을 필요로하지 않거나 보증하지 않으면 뷰를 기존 뷰 모델 객체에 바인딩 할 수 있습니다. 이것에 대해서는 간략히 비록 Using Composition에 설명되어 있습니다. 예를 들어

Composing Explicit Models and Views [when an object is supplied to the compose binding ..]

If a view property exists, but no model property, the view will be resolved and bound to the bindingContext, then injected into the element .. If both model and view properties exist, then they will be bound and injected into the element ..

는 model 값 될 감안 .. 명시

compose: { 
    view: 'views/guestSummary', 
    model: somethingThatResolvesToARelevantModelInThisContext 
} 

$root 모델을 결합한다.

나는 을 결코 사용하지 말 것을 권장합니다. 을 사용하면을 사용하는 것이 코드를 엉망으로 만들뿐입니다. 대신 적용 가능한 바인딩 이름 (예 : 각 바인딩)과 withProperties을 사용하십시오.이 경우에는 더 많은 의미가있는 이름을 제공하기 위해 $ root에 withProperties을 사용합니다.