问题描述
我正在测试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 };
});
单击已触发，但我不知道如何在父模板中添加子模板。 另外，我计划使用自定义元素的参数绑定将一些数据从父级传递到子级。 将子模板添加到父模板后，它仍然可以这样做吗？
1楼
在您的父组件中添加类似于以下内容的行：
<!-- 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您可以通过PARAMS /定值/观察到的填充。
以下是我测试过的示例模型：
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 ，从而删除子组件。
在这里查看完整的提琴：
至于第二个问题：
另外，我计划使用自定义元素的参数绑定将一些数据从父级传递到子级。
是的，您仍然可以这样做。 您甚至可以通过父模板中的组件绑定传递整个父viewModel，例如：
<!-- ko component: {name: 'child', params: {parent: $data}} -->