Knockout 3.2 component data context

data-binding, datacontext, knockout-components, knockout.js

Solution

Generally, you would want to supply your component with any data via `params`. For example, with your structure, you could create the component like:

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

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

Then, you would define the elements like:

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

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

You could choose to pass the `message` in directly for each and/or choose whatever names make sense for your params (rather than `vm`).

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

Problem

I am using Knockout 3.2 and the new component system. I am trying to have components that include sub-components. `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; })(); ``` As you can see the `HomePageViewModel` contains both the `NewsFeedViewModel`. I now want to be able to use these as the DataContext/BindingContext of my two components but this does not seem to work. Home.html ``` <news-feed data-bind="newsFeedViewModel"></news-feed> <news-feed data-bind="newsFeedViewModel2"></news-feed> ``` Both these components do not use the ViewModels from the `HomePageViewModel` but uses a new `NewsFeedViewModel`. How can I make the datacontext of both these components bind to the viewModels stored in the top component (home)?

Original source