knockout.js - 淘汰组件：将子组件作为参数传递给父组件

Question

我们正在重构一个 Knockout SPA。其中一项改进是尽可能使组件更通用。例如，我们需要一个<elements-widget>呈现元素列表的“多态”/泛型。根据列表的类型，类型子组件可能会有所不同。

当前应用的示例：

我们有一个“人物页面”：

<persons-page>
  <persons-widget> <persons-widget>
</persons-page>

“人员小部件”：

<div class="grid" data-bind="foreach: elements">
    <person-widget params="element:$rawData"></persons-widget>
</div>

相反，我们想在“人员页面”上使用通用组件

<elements-widget params="elements:elements, elemComponent:'person-widget'">
</elements-widget>

通用组件的模板应如下所示：

<div class="grid" data-bind="foreach: elements">
    <elemComponent> params="element:$rawData"></elemComponent>
</div>

其中elemComponent是传递给elements-widget的参数。

非常感谢

score 1 · Accepted Answer

您可以使用组件绑定来控制将在此位置呈现的确切组件：

<div data-bind='component: {
    name: "shopping-cart",
    params: { mode: "detailed-list", items: productsList }
}'></div>

组件名称，在本例中为“shopping-cart”，可以更改为当前上下文对象的属性，例如elementType包含您要呈现的组件名称。

1 回答 1