Knockout Kontekst danych składowych 3.2

Question

Używam Knockout 3.2 i nowego systemu komponentów. Próbuję mieć składniki, które zawierają podkomponenty.

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; 
})(); 

Jak widać HomePageViewModel zawiera zarówno NewsFeedViewModel. Teraz chcę móc używać ich jako DataContext/BindingContext z moich dwóch składników, ale to nie działa.

home.html

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

Oba te elementy nie używać ViewModels z HomePageViewModel ale wykorzystuje nową NewsFeedViewModel. Jak mogę uczynić datacontext obu tych komponentów powiązać z viewModels przechowywane w górnym składniku (home)?

Answer 1

Zasadniczo użytkownik chciałby dostarczyć komponentowi dowolne dane za pośrednictwem params. Na przykład, w swojej strukturze, można utworzyć komponent takiego:

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

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

Następnie, należy określić elementy, takie jak:

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

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

Można wybrać zdać message bezpośrednio dla każdego i/lub wybierz dowolne nazwy, które mają sens dla twoich parametrów (zamiast vm).

Próbka: http://jsfiddle.net/rniemeyer/fssXE/