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 };
});

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

Answer 1

在您的父组件中添加类似于：

的行

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

其中childTmpl是订阅child-click的布尔观察者。现在，如果您不想将名为＆＃39; child＆＃39;在父母内部。在这种情况下，您仍然可以使用父viewModel中的（n observable）属性替换它，甚至可以动态替换它。它会变成：

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

其中childComp是ParentViewModel上的属性，您可以填写params / fixed value / observable。以下是我测试的样本模型：

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/

至于你的第二个问题：

另外，我计划使用自定义元素的params绑定将一些数据从父级传递给子级。

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

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

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

1 个答案: