敲除组件：将子组件作为参数传递给父组件

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 IST传递给元素的小部件参数。

非常感谢

Answer 1

您可以使用component binding控制什么确切的成分会在这个地方被渲染：

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

组件名称，“购物推车”，在这种情况下，可以改变当前上下文对象的属性，如elementType，其中包含要呈现的组件名称。