Knockout 3.2 contesto dati componenti

Question

Sto utilizzando Knockout 3.2 e il nuovo sistema di componenti. Sto cercando di avere componenti che includono sottocomponenti.

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

Come si può vedere la HomePageViewModel contiene sia il NewsFeedViewModel. Ora voglio essere in grado di usarli come DataContext/BindingContext dei miei due componenti, ma questo non sembra funzionare.

Home.html

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

Entrambi questi componenti non utilizzano i ViewModels dal HomePageViewModel ma utilizza una nuova NewsFeedViewModel. Come posso fare in modo che il datacontext di entrambi questi componenti si leghi con viewModels memorizzati nel componente principale (home)?

Answer 1

Generalmente, si desidera fornire al componente tutti i dati tramite params. Ad esempio, con la vostra struttura, è possibile creare il componente come:

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

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

Poi, si dovrebbe definire gli elementi come:

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

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

Si può scegliere di passare il message in direttamente per ciascuno e/o scegli qualunque nome abbia senso per i tuoi parametri (piuttosto che per vm).

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