Data binding 淘汰3.2组件数据上下文

我正在使用淘汰3.2和新的组件系统。我正在尝试包含子组件的组件

主页（组件-带有HomePageViewModel）
NewsFeed1（具有HomePageViewModel.NewsFeedViewModel1的组件）
NewsFeed2（带有HomePageViewModel.NewsFeedViewModel2的组件）

主页视图模型

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

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

NewsFeedViewModel

var viewModel = (function () {
    function viewModel() {
        this.message = ko.observable("This is the profile!");
    }
    return viewModel;
})();

如您所见，

HomePageViewModel

包含了

NewsFeedViewModel

。我现在希望能够使用它们作为我的两个组件的DataContext/BindingContext，但这似乎不起作用

Home.html

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

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

---

这两个组件都不使用

HomePageViewModel

中的ViewModels，而是使用新的

NewsFeedViewModel

。如何使这两个组件的datacontext绑定到存储在顶部组件（home）中的viewModels？

通常，您希望通过

参数向组件提供任何数据。例如，使用您的结构，您可以创建如下组件：

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

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

ko.components.register（“新闻提要”{
viewModel:函数（参数）{
this.vm=params.vm；
},
模板：“新闻提要”
});

然后，您可以定义如下元素：

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

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



您可以选择为每个参数直接传递
消息
，和/或选择对参数有意义的名称（而不是
vm
）

示例：
感谢您提供此解决方案，我将在今晚尝试并更新帖子。此解决方案非常有效。谢谢你的帮助：）你好，请看一下下面的代码。我在viewModel中添加了一个函数，并将其绑定到viewModel中的一个函数。在这种情况下，如果我尝试从viewModel访问任何数据，它将始终是未定义的。我无法从viewModel中的函数访问数据。您在敲除中遇到了
单击
绑定的限制。调用事件处理程序函数时，它始终使用当前的
$data
对象作为
此
值。“我的库”修改
单击
（除其他外）以您期望的方式工作：否则，@user2465083，您可以在组件的模板中使用
with:vm
，然后直接绑定到
vm
上的方法/属性，它将具有正确的上下文。以下是一个示例：