녹아웃 3.2 구성 요소 데이터 컨텍스트

Question

녹아웃 3.2와 새 구성 요소 시스템을 사용하고 있습니다. 하위 구성 요소가 포함 된 구성 요소를 사용하려고합니다.

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with HomePageViewModel.NewsFeedViewModel2)

HomePageViewModel

var viewModel = (function() { 
    function viewModel() { 
     this.message = ko.observable("Welcome to DKT!"); 
     this.newsFeedViewModel = new gr.viewModel(); 
     this.newsFeedViewModel2 = new gr.viewModel(); 
     this.newsFeedViewModel.message("Message 1"); 
     this.newsFeedViewModel2.message("Message 2"); 
    } 
    return viewModel; 
})(); 

NewsFeedViewModel

var viewModel = (function() { 
    function viewModel() { 
     this.message = ko.observable("This is the profile!"); 
    } 
    return viewModel; 
})(); 

당신이 HomePageViewModel가 모두 NewsFeedViewModel를 포함 볼 수 있듯이. 지금은 두 가지 구성 요소의 DataContext/BindingContext로 사용할 수 있기를 원하지만 작동하지 않는 것 같습니다.

home.html을

<news-feed data-bind="newsFeedViewModel"></news-feed> 
<news-feed data-bind="newsFeedViewModel2"></news-feed> 

이 두 가지 구성 요소가 HomePageViewModel에서 ViewModels를 사용하지만 새로운 NewsFeedViewModel를 사용하지 않습니다. 어떻게 이러한 두 구성 요소의 datacontext를 상위 구성 요소 (집)에 저장된 viewModel에 바인딩 할 수 있습니까?

Answer 1

일반적으로 구성 요소에 params을 통해 데이터를 제공하려고합니다. 당신이 좋아하는 요소를 정의하는 것, 그리고

ko.components.register("news-feed", { 
    viewModel: function (params) { 
     this.vm = params.vm; 
    }, 

    template: "<h2>News Feed</h2><div data-bind=\"text: vm.message\"></div>" 
}); 

: 예를 들어, 구조, 당신은 같은 구성 요소를 만들 수 있습니다 당신은 각각의 직접의 message을 통과하도록 선택할 수 있습니다

<news-feed params="vm: newsFeedViewModel"></news-feed> 

<news-feed params="vm: newsFeedViewModel2"></news-feed> 

및/(vm 대신) 매개 변수에 맞는 이름을 선택하십시오.

샘플 :