다음과 같은 단순화 된 데이터를 고려하십시오.
var viewData = {
itemSize: 20,
items: [
'Zimbabwe', 'dog', 'falafel'
]
};그리고 핸들 바 템플릿 :
{{#each items}}
<div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}each루프 내에서 부모 범위에 액세스 할 수 없기 때문에 작동 하지 않습니다. 적어도 내가 시도한 방식은 아닙니다. 나는 이것을하는 방법이 있기를 바라고 있습니다!
답변
이를 달성하기위한 두 가지 유효한 방법이 있습니다.
부모 범위를 역 참조 ../
../속성 이름 앞에 추가 하면 부모 범위를 참조 할 수 있습니다.
{{#each items}}
<div style="font-size:{{../itemSize}}px">{{this}}</div>
{{#if this.items.someKey}}
<div style="font-size:{{../../itemSize}}px">{{this}}</div>
{{/if}}
{{/each}}을 반복하여 여러 수준으로 올라갈 수 있습니다 ../. 예를 들어, 두 레벨 위로 올라가려면을 사용하십시오 ../../key.
자세한 내용 은 경로에 대한 핸들 바 설명서를 참조하십시오 .
루트 범위를 @root
@root속성 경로 앞에 추가 하면 caballerog의 답변에 표시된 것처럼 최상위 범위에서 아래쪽으로 탐색 할 수 있습니다 .
자세한 내용 은 @data 변수에 대한 Handlebars 설명서를 참조하십시오 .
답변
새로운 방법은 도트 표기법을 사용하고 슬래시 표기법은 더 이상 사용되지 않습니다 ( http://handlebarsjs.com/expressions.html ).
따라서 부모 요소에 액세스하는 실제 방법은 다음과 같습니다.
@root.grandfather.father.element
@root.father.element구체적인 예에서는 다음을 사용합니다.
{{#each items}}
<div style="font-size:{{@root.viewData.itemSize}}px">{{this}}</div>
{{/each}}공식 문서 ( http://handlebarsjs.com/builtin_helpers.html ) 의 또 다른 방법은 별칭을 사용하는 것입니다
각 도우미는 블록 매개 변수를 지원하여 블록의 어느 곳에서나 명명 된 참조를 허용합니다.
{{#each array as |value key|}} {{#each child as |childValue childKey|}} {{key}} - {{childKey}}. {{childValue}} {{/each}} {{/each}}심층 변수 참조없이 어린이가 액세스 할 수있는 키 및 값 변수를 작성합니다. 위의 예에서 {{key}}>는 {{@ .. / key}}와 동일하지만 대부분의 경우 더 읽기 쉽습니다.
