넉 아웃 구성 요소 : 상위 구성 요소에 매개 변수로 하위 구성 요소를 전달합니다.

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 요소 - 위젯에 전달 된 매개 변수 표준시.

덕분에 당신은 정확한 구성 요소가이 자리에 렌더링되는 것을 제어 할 수 component binding을 사용할 수있는 많은

Answer 1

:

이

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

이 가

구성 요소 이름,이 경우 "쇼핑 카트"는 변경 될 수 있습니다 현재 컨텍스트 객체의 속성, 예를 들어 elementType에 렌더링하려는 구성 요소 이름이 포함되어 있습니다.