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

Question

我正在测试 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 };
});

触发了点击，但我不知道如何在父模板中添加子模板。此外，我计划使用自定义元素的参数绑定将一些数据从父级传递给子级。我将子模板添加到父模板后，它仍然可以这样做吗？

Answer 1

在您的父组件中添加类似于以下内容的行：

<!-- ko if: childTmpl --><!-- ko component: {name: 'child'} --><!-- /ko --><!-- /ko -->

其中 childTmpl 是一个订阅了 child-click 的布尔值观察值。现在，如果您不想在父组件中紧密耦合名为 'child' 的组件，这可能会出现一个小问题。在这种情况下，您仍然可以在父 viewModel 中用 a(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同样，删除子组件。在此处查看完整的 fiddle：

http://jsfiddle.net/ohdodfzr/2/

关于你的第二个问题：

Also, I plan to have some data passed from parent to child using params binding of custom element.

是的，您仍然可以这样做。您甚至可以通过父模板中的组件绑定传递整个父 viewModel，例如：

<!-- ko component: {name: 'child', params: {parent: $data}} -->

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

How to add components conditionally inside another component

javascript

knockout.js

knockout-3.0