knockout, how to pass observable through components

Question

im probably new to knockout, and tried as playground a single page application.

For each page i registered a component and im loading the component dynamically with a data-bind. I have in my second component observable which i want to use in my first component as well.

My HTML code:

<!-- Menu -->
<ul class="menu" data-bind="foreach: pages">
    <li data-bind="text: $data,
                    css: { selected: $data === $root.page() },
                    click: $root.goToPage"></li>
</ul>
<!-- Content -->
<div id="content" data-bind="component: { name: page() + '_content', params: { cont : page() } }">
</div>

My Javascript code:

function SinglePageViewModel() {
    var self = this;

    self.pages = ['Home','Profile','Users'];
    self.page = ko.observable();

    self.goToPage = function (page) {
        self.page(page);
    };

    self.goToPage(self.pages[0]);
};

ko.components.register('Home_content', {
    viewModel: function(params) {
        this.headline = ko.observable(params.cont || '');
    },
    template:
    '<h3 data-bind="text: headline"></h3><br>\
<span> Welcome <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>!</span>'
});

ko.components.register('Profile_content', {
    viewModel: function(params) {
        this.headline = ko.observable(params.cont || '');
        this.firstName = ko.observable("John");
        this.lastName = ko.observable("Snow");
    },
    template:
    '<h3 data-bind="text: headline"></h3><br>\
    <input data-bind="value: firstName" />\
    <input data-bind="value: lastName" />'
});

ko.components.register('Users_content', {
    viewModel: function(params) {
        this.headline = ko.observable(params.cont || '');
    },
    template:
    '<h3 data-bind="text: headline"></h3>'
});

ko.applyBindings(new SinglePageViewModel());

I have also a Fiddle. How is it possible to display 'Welcome John Snow!' on my default home page. Any suggestion how the whole system can be changed is also welcome, if its related to knockout. As said, im new to this, so i might have taken a totally wrong way, and I want to learn the 'correct way' of the usage ;-)

Answer 1

You just need to update the model and the values passed in the page update to observe values in the main view model, rather than storing the values in the components scope.

See my updated fiddle:

function SinglePageViewModel() {
    var self = this;
    
    self.pages = ['Home','Profile','Users'];
    self.page = ko.observable();
    self.user_firstName=ko.observable("John");
    self.user_lastName=ko.observable("Snow");
    
    
    self.goToPage = function (page) {
        self.page(page);
    };
    
    self.goToPage(self.pages[0]);
};

ko.components.register('Home_content', {
    viewModel: function(params) {
        this.headline = ko.observable(params.cont || '');
        this.firstName=params.firstName;
        this.lastName=params.lastName;
    },
    template:
    '<h3 data-bind="text: headline"></h3><br>\
<span> Welcome <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>!</span>'
});

ko.components.register('Profile_content', {
    viewModel: function(params) {
    		console.log(params);
        this.headline = ko.observable(params.cont || '');
        this.firstName=params.firstName;
        this.lastName=params.lastName;
    },
    template:
    '<h3 data-bind="text: headline"></h3><br>\
    <input data-bind="value: firstName" />\
    <input data-bind="value: lastName" />'
});

ko.components.register('Users_content', {
    viewModel: function(params) {
        this.headline = ko.observable(params.cont || '');
    },
    template:
    '<h3 data-bind="text: headline"></h3>'
});

ko.applyBindings(new SinglePageViewModel());

*{padding:0;margin:0;box-sizing:border-box;}
body{padding:30px;display:flex;color:#888;min-width:500px;font-family:sans-serif;}

ul{height:100%;width:25%;border-right:1px solid #CCC;list-style-type:none;}
li{height:35px;line-height:35px;width:100%;padding-left:20px;border-bottom:1px solid #CCC;cursor:pointer;}
li:hover,li.selected{background-color:#EEE;}

#content{width:75%;height:100%;text-align:center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!-- Menu -->
<ul class="menu" data-bind="foreach: pages">
    <li data-bind="text: $data,
                    css: { selected: $data === $root.page() },
                    click: $root.goToPage"></li>
</ul>
<div id="content" data-bind="component: { name: page() + '_content', params: { cont : page(),firstName:user_firstName,lastName:user_lastName } }">
</div>