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

Question

Durandal : 가능한 경우 ViewModels간에 데이터 (매개 변수)를 전달하는 올바른 방법은 무엇입니까 (백엔드를 다루지 않고).

개요 및 세부 정보 개요 의 목록 요소에서 사용자 클릭을 그 요소의 세부 정보 viewModel에 전달하여 그 ID로 작업을 시작할 수 있습니다.

도움말

에 감사드립니다.

Answer 1

힌트 : 당신은 아마도 노선 중심의 접근 방식을 원할 것입니다. 다른 하나는 완전성을 위해서입니다.

ViewModel 중심 접근 일반적으로 나는 모듈을 만들고, 그것을 데이터를 호출하고, 뷰 모드를 모두 뷰 모듈에 주입합시다. 그런 다음 개요는 데이터 모듈의 ClickedElementID 특성을 설정할 수 있으며 세부 정보는 속성의 값을 읽을 수 있으며이를 사용하여 속성을 사용하여 속성을 개요하여 속성을 변경하면 속성에 대한 정보가 알림을받을 수 있습니다). 이 접근 방식은 두 뷰 모드가 동시에 활성화 될 수있는 반면, 다음 (선호) 솔루션은 한 뷰에서 다른보기에서 다른보기로 가라 앉는다면 작동합니다. 이 'ViewModel-Driven'접근 방식은 응용 프로그램의 공통 데이터에 대해 개인적으로 사용하는 것입니다 (이러한 종류의 속성에 대해 응용 프로그램 쉘 뷰 모드를 사용할 수도 있습니다).

경로 중심 접근법 상황에 대한 귀하의 설명을 주어주고 싶은 것으로 보입니다. 정의 된 경로는 (선택적) 매개 변수를 가져갈 수 있습니다. 이제 라우트 '세부 사항'이 있다고 가정 해보십시오. '세부 정보 / : ID'(ID 매개 변수, 비 선택적) 또는 '세부 정보 (/ : 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는 viewmout helper이며,이 경우 목록 요소에 전달하는 요소에 바인딩 된 뷰 모드 데이터를 얻는 좋은 녹아웃 도우미입니다. 켜기 켜기 자세한 내용을 탐색하고 클릭 된 요소의 ID를 세부 정보로 전달합니다. 위의 코드는 모두 그 모든 것입니다.

이제 세부 정보 viewmodel의 활성화 함수는 다음과 같아야합니다.

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>

.

행운을 빕니다! 아직도 불분명하면 알려주지 않으면