[javascript] Handlebars ‘each’루프를 사용하여 부모의 속성에 액세스

JAVASCRIPT / 글쓴이

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

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

답변