ノックアウトコンポーネント：親コンポーネントへのパラメータとして子コンポーネントを渡す

Question

ノックアウトSPAをリファクタリングしています。改善点の1つは、可能な場合にコンポーネントをより汎用的にすることです。たとえば、要素のリストをレンダリングする "多形" /汎用<elements-widget>が必要です。リストのタイプに応じて、タイプの子コンポーネントは異なる場合があります。代わりに、私たちは希望

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

：

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

"人物ウィジェット"：

私たちは、 "人のページ" を持っている：現在のアプリため

サンプル「人物ページ」の汎用コンポーネントを使用してください

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

と汎用コンポーネントのテンプレートは、次のようなものになります。要素-ウィジェットに渡されたパラメータIST

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

elemComponentを。

どうもありがとう

Answer 1

あなたは、正確なコンポーネントがこの場所でレンダリングされるかを制御するためにcomponent bindingを使用することができます。この場合は

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

コンポーネント名、「ショッピング・カート」に変更することができます現在のコンテキストオブジェクトのプロパティ、たとえばレンダリングするコンポーネント名を含むelementTypeのプロパティ