Question

我可能是淘汰赛的新手，并试图在单一页面应用中作为游乐场。

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

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

我还有Fiddle。如何才能展示“欢迎约翰·斯诺！”＃39;在我的默认主页上。如果它与淘汰相关，也欢迎任何关于如何改变整个系统的建议。如上所述，我是新手，所以我可能采取了完全错误的方式，我想学习正确的方法＆＃39;用法; - ）

淘汰赛，如何通过组件传递可观察性

0 个答案: