gpt4 book ai didi

data-binding - Knockout 3.2 组件数据上下文

转载 作者:行者123 更新时间:2023-12-04 20:06:37 25 4
gpt4 key购买 nike

我正在使用 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;
})();

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

这两个组件都不使用 HomePageViewModel 中的 ViewModel。但使用新的 NewsFeedViewModel .如何使这两个组件的数据上下文绑定(bind)到存储在顶部组件(主页)中的 View 模型?

最佳答案

通常,您会希望通过 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 )。

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

关于data-binding - Knockout 3.2 组件数据上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24687850/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com