Knockout 3.2 Komponentendaten Kontext

Question

Ich benutze Knockout 3.2 und das neue Komponentensystem. Ich versuche Komponenten zu haben, die Unterkomponenten enthalten.

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

Wie Sie die HomePageViewModel enthält sowohl die NewsFeedViewModel sehen können. Ich möchte jetzt in der Lage sein, diese als DataContext/BindingContext meiner beiden Komponenten zu verwenden, aber das scheint nicht zu funktionieren.

Home.html

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

Beide Komponenten, die die Viewmodels nicht vom HomePageViewModel verwenden, sondern verwendet eine neue NewsFeedViewModel. Wie kann ich den Datenkontext dieser beiden Komponenten an die in der obersten Komponente (home) gespeicherten viewModels binden?

Answer 1

Im Allgemeinen möchten Sie Ihre Komponente mit Daten über params versorgen. Zum Beispiel mit Ihrer Struktur, könnten Sie die Komponente wie erstellen:

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

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

Dann Sie die Elemente, wie definieren würde:

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

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

Sie können wählen, für die jeweils die message in direkt und Pass/oder wählen Sie die Namen, die für Ihre Parameter sinnvoll sind (statt vm).

Probe: http://jsfiddle.net/rniemeyer/fssXE/