Knockout 3.2组件数据上下文(Knockout 3.2 component data context)

Knockout 3.2组件数据上下文(Knockout 3.2 component data context)

我正在使用Knockout 3.2和新的组件系统。 我试图让组件包含子组件。

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with HomePageViewModel.NewsFeedViewModel2)

HomePageViewModel

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

NewsFeedViewModel

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

正如你所看到的， HomePageViewModel包含NewsFeedViewModel 。 我现在想能够使用这些作为我的两个组件的DataContext / BindingContext，但这似乎不工作。

Home.html中

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

这两个组件都不使用HomePageViewModel的ViewModel，而是使用新的NewsFeedViewModel 。 我怎样才能使这两个组件的datacontext绑定到存储在顶部组件（home）中的viewModel？

I am using Knockout 3.2 and the new component system. I am trying to have components that include sub-components.

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with HomePageViewModel.NewsFeedViewModel2)

HomePageViewModel

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

NewsFeedViewModel

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

As you can see the HomePageViewModel contains both the NewsFeedViewModel. I now want to be able to use these as the DataContext/BindingContext of my two components but this does not seem to work.

Home.html

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

Both these components do not use the ViewModels from the HomePageViewModel but uses a new NewsFeedViewModel. How can I make the datacontext of both these components bind to the viewModels stored in the top component (home)?

最满意答案

一般来说，你会想通过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传递message和/或选择任何适合您的参数的名称（而不是vm ）。

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

Generally, you would want to supply your component with any data via params. For example, with your structure, you could create the component like:

ko.components.register("news-feed", { viewModel: function (params) { this.vm = params.vm; }, template: "<h2>News Feed</h2><div data-bind=\"text: vm.message\"></div>" });

Then, you would define the elements like:

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

You could choose to pass the message in directly for each and/or choose whatever names make sense for your params (rather than vm).

Sample: http://jsfiddle.net/rniemeyer/fssXE/