如何在另一个组件中有条件地添加组件

How to add components conditionally inside another component

本文关键字：组件 有条件 添加 另一个      更新时间：2023-09-26

我正在测试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"的组件，这可能会出现一个小问题。在这种情况下，您仍然可以用父视图模型中的(n可观察)属性替换它，甚至可以动态替换。它会变成:

<!-- 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/

关于你的第二个问题:

此外，我计划使用自定义元素的参数绑定将一些数据从父传递到子。

是的，你仍然可以这样做。你甚至可以通过父模板中的组件绑定传递整个父视图模型，例如:

<!-- ko component: {name: 'child', params: {parent: $data}} -->
相关文章：