Knockout Components: Pass child components as parameter to parent component

Question

We are refactoring a Knockout SPA. One of the improvements is to make components more generic where possible. For example, we would need a "polymorphic"/generic <elements-widget> that renders a list of elements. Depending of type of list, the type child components may vary.

Sample for the current app:

We have a "persons page":

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

The "persons-widget":

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

Instead we would like use the generic component on the "persons page"

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

and the template of the generic component should look something like this:

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

where elemComponent ist the parameter passed to the elements-widget.

Thanks a lot

Answer 1

You can use component binding to control what exact component will be rendered in this place:

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

Component name, "shopping-cart" in this case, can be changed to the property of the current context object, say elementType containing the component name you want to render.