핸들바 '각' 루프가 있는 부모 속성 접근

핸들바 '각' 루프가 있는 부모 속성 접근

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

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}. 단, 대부분의 경우 더 읽기 쉽습니다.

불행히도../ 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분적인 부분단, partial로 전달된 컨텍스트에 속성을 추가할 수 있습니다.

Name: {{parent.name}}

{{#each children}}
    {{> childpartial this parent=../parent}}
{{/each}}

부분:

{{name}} is child of {{parent.name}}

추가: 핸들바 - 부모 컨텍스트에 부분적으로 액세스할 수 있습니까?

부모에게 접속하려면 {{../parent.propertyname}}을(를) 사용합니다.

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