Handlebars 'each'루프를 사용하여 부모의 속성에 액세스

Handlebars 'each'루프를 사용하여 부모의 속성에 액세스

---

다음과 같은 단순화 된 데이터를 고려하십시오.

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}}와 동일하지만 대부분의 경우 더 읽기 쉽습니다.

참고 URL :

https://stackoverflow.com/questions/12297959/access-properties-of-the-parent-with-a-handlebars-each-loop