부분보기의 녹아웃 바인딩 문제

Question

알림 처리를위한 다른보기에 포함시킬 수있는 부분보기를 만들었습니다.

<div id="notifications"> 
    <!-- ko with: $root.currentNotification --> 
    <span data-bind="text: notificationType"></span> 
    <span data-bind="text: friendlyMessage"></span> 
    <!-- ko if: $root.technicalMessageShown --> 
    <span data-bind="text: technicalMessage"></span> 
    <!-- /ko --> 
    <button data-bind="click: $root.toggleTechnicalMessage, text: $root.technicalMessageButtonText"></button> 
    <button data-bind="click: $root.dismissNotification">Dismiss</button> 
    <!-- /ko --> 

    <pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

</div> 

뷰는 부모 뷰에서 다음 바인딩을 사용하여 뷰 모델에 바인딩됩니다. 렌더링 될 때

var notificationsViewModel = new NotificationsViewModel(); 
ko.applyBindings(notificationsViewModel, document.getElementById("notifications")); 
var viewModel = new MainViewModel(); 
ko.applyBindings(viewModel); 

는 내부 요소 '와 코 : $ root.currentNotification'는 currentNotification 뷰 모델에 존재하더라도 DOM에 포함되지 않는다. 부분보기에서 마지막 줄에서 표시

보기 모델 : 녹아웃 현재 통지가 표시되지 않는 이유

{ 
    "allNotifications": [ 
    { 
     "id": "0", 
     "notificationType": "Error", 
     "friendlyMessage": "Lorem ipsum dolor sit amet.", 
     "technicalMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, porta ac condimentum in, condimentum sed dui. Aliquam interdum." 
    } 
    ], 
    "currentNotification": { 
    "id": "0", 
    "notificationType": "Error", 
    "friendlyMessage": "Lorem ipsum dolor sit amet.", 
    "technicalMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, porta ac condimentum in, condimentum sed dui. Aliquam interdum." 
    }, 
    "technicalMessageButtonText": "More Info" 
} 

어떤 생각?

Answer 1

두 바인딩을 모두 대상으로 지정해야합니다. 단 하나의 바인딩 만 대상으로 지정하면 다른 하나는이를 덮어 씁니다.