Knockout.js 淘汰赛，如何通过组件传递可观察到的信息

我可能是新来的击倒，并试图作为一个单一的页面应用程序

对于每个页面，我都注册了一个组件，并使用数据绑定动态加载该组件。 在我的第二个组件中有可观察的，我想在我的第一个组件中也使用它

我的HTML代码：

<!-- 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>

我的Javascript代码：

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

函数SinglePageViewModel（）{
var self=这个；
self.pages=['Home'，'Profile'，'Users']；
self.page=ko.observable（）；
self.goToPage=函数（第页）{
self.page（第页）；
};
self.goToPage（self.pages[0]）；
};
ko.组件寄存器（“主内容”{
viewModel:函数（参数）{
this.headline=ko.observable（params.cont | | |“”）；
},
模板：
“
\
欢迎
});
ko.components.register（'Profile_content'{
viewModel:函数（参数）{
this.headline=ko.observable（params.cont | | |“”）；
this.firstName=ko.observable（“约翰”）；
this.lastName=ko.可观测（“雪”）；
},
模板：
“
\
\
'
});
ko.components.register（'Users\u content'{
viewModel:函数（参数）{
this.headline=ko.observable（params.cont | | |“”）；
},
模板：
''
});
应用绑定（新的SinglePageViewModel（））；

我也有一个朋友。怎么可能显示“欢迎约翰·斯诺！”在我的默认主页上。 任何关于如何改变整个系统的建议都是受欢迎的，如果它与淘汰有关的话。

---

如前所述，我是新来的，所以我可能采取了一种完全错误的方式，我想学习这个用法的“正确方式”。-）

您只需要更新模型，并更新页面中传递的值，以观察主视图模型中的值，而不是将值存储在组件范围中

查看我的最新小提琴：

函数SinglePageViewModel（）{
var self=这个；
self.pages=['Home'，'Profile'，'Users']；
self.page=ko.observable（）；
self.user_firstName=ko.observable（“约翰”）；
self.user_lastName=ko.observable（“雪”）；
self.goToPage=函数（第页）{
self.page（第页）；
};
self.goToPage（self.pages[0]）；
};
ko.组件寄存器（“主内容”{
viewModel:函数（参数）{
this.headline=ko.observable（params.cont | | |“”）；
this.firstName=params.firstName；
this.lastName=params.lastName；
},
模板：
“
\
欢迎
});
ko.components.register（'Profile_content'{
viewModel:函数（参数）{
控制台日志（params）；
this.headline=ko.observable（params.cont | | |“”）；
this.firstName=params.firstName；
this.lastName=params.lastName；
},
模板：
“
\
\
'
});
ko.components.register（'Users\u content'{
viewModel:函数（参数）{
this.headline=ko.observable（params.cont | | |“”）；
},
模板：
''
});
应用绑定（新的SinglePageViewModel（））
*{填充：0；边距：0；框大小：边框框；}
正文{填充：30px；显示：flex；颜色：#888；最小宽度：500px；字体系列：无衬线；}
ul{高度：100%；宽度：25%；右边框：1px实心#CCC；列表样式类型：无；}
li{高度：35px；线条高度：35px；宽度：100%；左侧填充：20px；边框底部：1px实心#CCC；光标：指针；}
李：鼠标悬停，李。选择{背景色：#EEE；}
#内容{宽度：75%；高度：100%；文本对齐：居中；}