我正在测试Knockout的组件功能，到目前为止，它已经能够成功地在几种情况下使用它。现在，我遇到了无法找到有关如何执行操作的资源的情况。我想基于某个关键字在另一个组件内添加一个组件。这是一些片段：
父组件的模板
<div id="container">
</div>
父组件的视图模型
define(["jquery", "knockout", "ko-postbox", "text!./parent.html"], function($, ko, kopost, template) {
function displayChildContent(value) {
switch (value.toLowerCase()) {
case "child":
//
// How to load child component?
//
break;
default:
break;
}
}
function ParentViewModel() {
ko.postbox.subscribe("child-click", function(newValue) {
displayChildContent(newValue);
}, this);
}
return { viewModel: ParentViewModel, template: template };
});
子组件的模板
<div>
<h1>Child</h1>
</div>
子组件的视图模型
define(["text!./child.html"], function(template) {
function ChildViewModel() {
}
return { viewModel: ChildViewModel, template: template };
});
单击已触发，但我不知道如何在父模板中添加子模板。另外，我计划使用自定义元素的参数绑定将一些数据从父级传递到子级。将子模板添加到父模板后，它仍然可以这样做吗？
在您的父组件中添加类似于以下内容的行：
<!-- ko if: childTmpl --><!-- ko component: {name: 'child'} --><!-- /ko --><!-- /ko -->
这里childTmpl是一个布尔值，观察到的订阅使用child-click。现在，如果您不想在父级内部紧密耦合名为“ child”的组件，则可能会出现一个小问题。在那种情况下，您仍然可以将其替换为父viewModel中的（n observable）属性，甚至可以动态替换。它将变成：
<!-- ko if: childTmpl --><!-- ko component: {name: childComp} --><!-- /ko --><!-- /ko -->
在哪里可以填写参数/固定值/可观察值childComp的属性ParentViewModel。这是我测试过的样本模型：
function ParentViewModel(params) {
this.childComp = params && params.child || 'child';
this.childTmpl = ko.observable(true).subscribeTo("child-click");
}
function ChildViewModel(params) {
this.buttonClicked = ko.observable(true).publishOn("child-click");
}
ChildViewModel.prototype.toggle = function() {
this.buttonClicked(!this.buttonClicked());
};
在测试情况下，点击子组件的按钮（其最初示出）触发buttonClicked到false，然后更新childTmpl到false为好，除去子组件。在这里查看完整的小提琴：
http://jsfiddle.net/ohdodfzr/2/
至于第二个问题：
另外，我计划使用自定义元素的参数绑定将一些数据从父级传递到子级。
是的，您仍然可以这样做。您甚至可以通过父模板中的组件绑定传递整个父viewModel，例如：
<!-- ko component: {name: 'child', params: {parent: $data}} -->
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句