durandal : ViewModels간에 데이터를 전달하는 가장 좋은 방법

Question

Durandal : 가능한 경우 (백엔드 처리없이) ViewModels간에 데이터 (매개 변수)를 전달하는 올바른 방법은 무엇입니까?

하자 내가 2 개보기 개요 및 세부 내가 개요에서 목록 요소의 사용자 klick을 갔던 원하는을가하도록 뷰 모델을 해당 요소의 ID를 받아 세부 사항에 전달 말을 전 그 이드와 함께 작업을 시작할 수 있습니다.

도움에 감사드립니다.

Answer 1

힌트 : 아마도 경로 중심 접근 방식을 원할 것입니다. 다른 하나는 완전을 기하기위한 것입니다.

뷰 모델 중심의 접근 방식 일반적으로 내가 말할 것이다 : 모듈을 생성의 데이터를 호출, 두 viewmodels의 데이터 모듈을 삽입 할 수 있습니다. 그런 다음 개요는 데이터 모듈에서 clickedElementId 속성을 설정할 수 있으며 세부 사항은 속성의 값을 읽고이를 사용할 수 있습니다 (속성을 관찰 가능하게 만들 수도 있으므로 개요로 속성을 변경하면 세부 사항에 통지됩니다). 이 방법은 두 가지보기 모드가 동시에 활성화 될 때 작동하며, 다음 (선호) 솔루션은보기간에 라우팅 할 때만 작동하므로 동시에 활성화되지 않습니다. 이 '보기 모델 기반'접근 방식은 내가 개인적으로 응용 프로그램의 공통 데이터에 사용하는 것입니다 (이러한 종류의 특성에 응용 프로그램 셸 뷰 모델을 사용할 수도 있습니다).

경로 기반 접근 방식 상황에 대한 설명이 주어지기를 원하는 것처럼 보입니다. 정의 된 경로는 (선택적) 매개 변수를 취할 수 있습니다. 경로 'details'가 있다고 가정하면 'details/: id'(id 매개 변수는 선택 사항이 아닌) 또는 'details (/ : id)'(id 매개 변수는 선택 사항)를 변경할 수 있습니다.

당신은 이벤트 처리기가 필요리스트 요소 클릭이 같은 비트 :

overview.onElementClick = function (e) { 
    var element = this, // The idea is that you need the clicked element for the next line of code 
     koDataForElement = ko.dataFor(element); 

    router.navigate('details/' + koDataForElement.id); 
} 

ko.dataFor 당신이 그것으로 전달하는 요소에 바인딩 된 뷰 모델 데이터를 얻을 수있는 좋은 녹아웃 도우미입니다, 이 경우 귀하의 목록 요소. 클릭시 세부 정보로 이동하고 클릭 된 요소의 ID를 세부 정보로 전달합니다. 위 코드가 모든 것을 수행합니다.

는 이제 세부 뷰 모델의의 기능은 다음과 같아야합니다 활성화 :

details.activate = function (id) { 
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view! 
}; 

편집 : 추가 힌트 : 당신이 직접 링크에서 ID로 경로를 트리거 할 수 있습니다. 전체 목록 요소가 앵커 태그에 래핑 된 경우 다음과 같이 할 수 있습니다.

<div data-bind="foreach: myListOfElements"> 
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a> 
</div> 

행운을 빈다. 아직 명확하지 않은 경우 알려주십시오.