[javascript] 각 루프의 Handlebars.js 범위 밖의 변수에 액세스

Program / 글쓴이

다음과 같이 handlebars.js 템플릿이 있습니다.

{{externalValue}}

<select name="test">
    {{#each myCollection}}
       <option value="{{id}}">{{title}} {{externalValue}}</option>
    {{/each}}
</select>

그리고 이것은 생성 된 출력입니다.

myExternalValue

<select name="test">
       <option value="1">First element </option>
       <option value="2">Second element </option>
       <option value="3">Third element </option>
</select>

예상대로 모든 요소의 id및 title필드에 액세스하여 myCollection선택을 생성 할 수 있습니다 . 그리고 선택 외부에서 externalValue변수가 올바르게 인쇄됩니다 ( “myExternalValue”).

불행히도, 옵션 텍스트에서는 externalValue가치가 인쇄되지 않습니다.

내 질문은 : 루프 내에서 각각 handlebars.js 범위 밖의 변수에 어떻게 액세스 할 수 있습니까?

답변

시험

<option value="{{id}}">{{title}} {{../externalValue}}</option>

../경로 세그먼트는 당신이 원하는 무엇을해야 부모 템플릿 범위를 참조합니다.

답변

또는 다음과 같이 절대 경로를 사용할 수 있습니다.

<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>

답변

이 주제에 대한 문서화를 위해 404와 많은 링크를 보았습니다.

이 업데이트로 업데이트하면 2020 년 4 월 1 일에 작동합니다 .

https://handlebarsjs.com/guide/expressions.html#path-expressions

#with 및 #each와 같은 일부 도우미를 사용하면 중첩 된 개체로 다이빙 할 수 있습니다. 경로에 ../ 세그먼트를 포함 시키면 핸들 바가 부모 컨텍스트로 다시 변경됩니다.

    {{#each people}}
    {{../prefix}} {{firstname}} 
    {{/each}}

주석 컨텍스트에서 이름이 인쇄 되더라도 여전히 접두사를 검색하기 위해 기본 컨텍스트 (루트 오브젝트)로 돌아갈 수 있습니다.

경고

../가 해결하는 정확한 값은 블록을 호출하는 도우미에 따라 다릅니다. ../ 사용은 컨텍스트가 변경 될 때만 필요합니다. {{#each}}와 같은 도우미의 자녀는 ../를 사용해야하지만 {{#if}}와 같은 도우미의 자녀는 그렇지 않습니다.

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

이 예에서 위의 모든 값은 다른 블록 내에 있지만 동일한 접두사 값을 참조합니다. 이 동작은 Handlebars 4의 새로운 기능이며 릴리스 노트 는 이전 동작과 마이그레이션 계획에 대해 설명합니다.

답변