간결성을 위해 업데이트 됨
$ parents의 $ parent를 중첩 된 Knockout foreach / 바인딩을 사용하여 참조 할 수 있습니까?
예 –
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents --> // <-- Doesn't work
<!-- ko foreach: children -->
<td data-bind="if: favToy().name == $parent.$parent.favToy().name">
<span data-bind="text: favToy().name"></span>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
실물
혼란스러운 질문에 대해 죄송하지만 $ parent의 $ parent 값 (ugh!)과 일치하는 경우에만 범위를 표시하기 위해 현재 컨텍스트 (아래와 같이)의 값과 비교하여 두 번째 수준 부모의 값에 도달하려고합니다.
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents -->
<!-- ko foreach: children -->
<td data-bind="if: favToy().name == $parent.$parent.favToy().name">
<span data-bind="text: favToy().name"></span>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
이런 식으로하는 것이 더 쉬울 것이지만 내가 읽은 것에서 이것은 불가능하거나 잘못하고 있습니다. 🙂
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents -->
<!-- ko foreach: children ? favToy().name == $parent.$parent.favToy().name -->
<td data-bind="text: favToy().name"></td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
어떤 도움이라도 대단히 감사하겠습니다.
답변
$parents
배열을 사용하면 조부모는 $parents[1]
. 예제 $root
의 grandParent
객체가 최상위 부모 인 경우 에도 사용할 수 있습니다 .
로부터 문서 :
$ 부모
이것은 모든 상위 뷰 모델을 나타내는 배열입니다.
$ parents [0]은 부모 컨텍스트의 뷰 모델입니다 (즉, $ parent와 동일).
$ parents [1]은 조부모 컨텍스트의 뷰 모델입니다.
$ parents [2]는 증조부모 컨텍스트의 뷰 모델입니다.
… 등등.
$ root
이것은 루트 컨텍스트, 즉 최상위 상위 컨텍스트의 기본 뷰 모델 객체입니다. 일반적으로 ko.applyBindings에 전달 된 개체입니다. $ parents [$ parents.length-1]과 동일합니다.
답변
사용할 수 있습니다 $parentContext.$parent
.
$parentContext
같은 많은 유용한 특성을 제공한다 ( $data
, $parent
, $index
, …)
답변
다음과 같이 noChildContext 설정을 사용하는 것이 더 쉬울 것이라고 생각합니다.
자식 컨텍스트를 만들지 않고 “as”사용
as 옵션의 기본 동작은 현재 항목의 이름을 추가하는 동시에 콘텐츠를 항목에 바인딩하는 것입니다. 그러나 컨텍스트를 변경하지 않고 현재 항목의 이름 만 설정하는 것을 선호 할 수 있습니다. 이 후자의 동작은 Knockout의 향후 버전에서 아마도 기본값이 될 것입니다. 특정 바인딩에 대해 켜려면 noChildContext 옵션을 true로 설정하십시오. 이 옵션을 as와 함께 사용하면 배열 항목에 대한 모든 액세스가 주어진 이름을 통해 이루어져야하며 $ data는 외부 뷰 모델로 설정된 상태로 유지됩니다. 예를 들면 :
<ul data-bind="foreach: { data: categories, as: 'category', noChildContext: true }">
<li>
<ul data-bind="foreach: { data: category.items, as: 'item', noChildContext: true }">
<li>
<span data-bind="text: category.name"></span>:
<span data-bind="text: item"></span>
</li>
</ul>
</li>
</ul>