5

我正在使用 Knockout 3.2 和新的组件系统。我正在尝试拥有包含子组件的组件。

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with 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;
})();

新闻FeedViewModel 

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

如您所见，HomePageViewModel包含两个NewsFeedViewModel. 我现在希望能够将它们用作我的两个组件的 DataContext/BindingContext 但这似乎不起作用。

主页.html

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

这两个组件都没有使用 ViewModel，HomePageViewModel而是使用新的NewsFeedViewModel. 如何使这两个组件的数据上下文绑定到存储在顶部组件（主页）中的视图模型？

4

1 回答 1

4

通常，您会希望通过 为您的组件提供任何数据params。例如，使用您的结构，您可以创建如下组件：

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

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

然后，您将定义如下元素：

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

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

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

示例：http: //jsfiddle.net/rniemeyer/fssXE/

于 2014-07-11T01:34:50.937 回答