핸들 막대의 인덱스를 사용하여 액세스 배열 항목에 어떻게 액세스합니까?


270

핸들 바 템플릿 내에서 배열의 항목 인덱스를 지정하려고합니다.

{
  people: [
    {"name":"Yehuda Katz"},
    {"name":"Luke"},
    {"name":"Naomi"}
  ]
}

이것을 사용하여 :

<ul id="luke_should_be_here">
{{people[1].name}}
</ul>

위의 방법을 사용할 수 없다면 어떻게 배열 내의 spefic item에 접근 할 수있는 helper를 작성합니까?

답변:


409

이 시도:

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>

26
이것은 어디에도 문서화되어 있지 않습니다! 대박.
lukemh

25
나는군요 Expecting 'ID'과 오류를 {{user.links.websites.1}} 또는 {{user.links.websites.0}}
올리비에 Lalonde

131
@OlivierLalonde, 나는 같은 것을 사용해야했습니다 {{ websites.[0] }}.
Matt

4
실제로 @Matt는 운이 좋은 형식 일뿐 아니라 문서화 된 구문의 일종입니다. (내 답변 참조)
Arjan

5
배열의 마지막 요소는 어떻습니까?
winduptoy

319

index 앞에 추가 점이있는 다음 은 예상대로 작동합니다. 여기서 대괄호는 인덱스 다음에 다른 속성이있을 때 선택 사항입니다.

{{people.[1].name}}
{{people.1.name}}

그러나 대괄호는 다음에 필요합니다 .

{{#with people.[1]}}
  {{name}}
{{/with}}

후자의 경우, 대괄호없이 색인 번호를 사용하면 다음 중 하나를 얻을 수 있습니다.

Error: Parse error on line ...:
...     {{#with people.1}}                
-----------------------^
Expecting 'ID', got 'INTEGER'

따로 : 대괄호는 세그먼트 리터럴 구문에 사용되며 , 그렇지 않으면 유효하지 않은 실제 식별자 (인덱스 번호 아님)를 나타냅니다. 에서 자세한 내용 유효한 ID는 무엇입니까?

(YUI의 핸들 바로 테스트했습니다.)

2.xx 업데이트

이제이를 위해 get도우미를 사용할 수 있습니다 .

(get people index)

색인이 문자열이어야한다는 오류가 발생하면 다음을 수행하십시오.

(get people (concat index ""))

10
선택한 답변보다 더 철저하기 때문에 답변이되어야합니다. 인덱스가 끝날 때 대괄호를 요구하면 잠시 동안 붙어 있습니다!
modulitos

이 트릭을했다! 고마워요 ... 위의 선택된 답변이 그렇지 않은 경우, 올바른 것으로 표시하십시오.
MarioAraya

1
{{#with people.1}}솔루션을 사용하여, 날 위해 일했습니다 com.github.jknack:handlebars:4.1.2.
Ferran Maylinch

21
{{#each array}}
  {{@index}}
{{/each}}

굉장합니다. 정답입니다. @index는 배열의 위치를 ​​알려줍니다.
Oscar Romero

17

문서화되지 않은 기능이 게임이 아닌 경우 여기에서 동일한 기능을 수행 할 수 있습니다.

Handlebars.registerHelper('index_of', function(context,ndx) {
  return context[ndx];
});

그런 다음 템플릿에서

{{#index_of this 1}}{{/index_of}}   

보류하기 전에 위의 내용을 작성했습니다.

this.[0]

나는 당신의 도우미를 쓰지 않고 핸들 바로 너무 멀리 나가는 것을 볼 수 없습니다.



8

첫 번째 / 마지막으로 가져 오려면 이것을 시도하십시오.

{{#each list}}

    {{#if @first}}
        <div class="active">
    {{else}}
        <div>
    {{/if}}

{{/each}}


{{#each list}}

    {{#if @last}}
        <div class="last-element">
    {{else}}
        <div>
    {{/if}}

{{/each}}

7

each현재 항목의 컨텍스트에서 다른 배열에 액세스하려는 경우 와 같이 배열을 반복하는 동안 이와 같이 수행합니다.

다음은 예제 데이터입니다.

[
  {
    이름 : 'foo',
    속성 : [ 'boo', 'zoo']
  },
  {
    이름 : 'bar',
    속성 : [ 'far', 'zar']
  }
]

다음은 첫 번째 항목을 attr배열 로 가져 오는 핸들 막대 입니다.

{{#each player}}
  <p> {{this.name}} </ p>

  {{#with this.attr}}
    <p> {{this. [0]}} </ p>
  {{/와}}

{{/마다}}

출력됩니다

<p> foo </ p>
<p> 부 </ p>

<p> 바 </ p>
<p> 먼 </ p>

attr 배열이 다른 객체에 대해 다른 수의 요소를 가지고 있다면 그것을 반복하는 프로세스는 무엇입니까? 예를 들면 다음과 같습니다. [{name : 'foo', attr : [ 'boo', 'zoo']}, {name : 'bar', attr : [ 'far', 'zar', 'sar]}] 그러면 어떻게 배열의 모든 객체에 대한 모든 속성을 보여줄 것입니까?
Partha Roy

나는 그것을 시도하지 않았지만 {{#with this.attr}} this대신에 작동 한다고 가정합니다this.[0]
Fatih Acet

1

배열의 이름이 지정되지 않은 경우 (배열 만 템플릿에 전달됨) 다음 구문을 사용할 수도 있습니다.

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>

0

제 경우에는 맞춤 도우미 내부의 배열에 액세스하고 싶었습니다.

{{#ifCond arr.[@index] "foo" }}

작동하지 않았지만 @julesbou가 제안한 답변이 효과가있었습니다.

작업 코드 :

{{#ifCond (lookup arr @index) "" }}

도움이 되었기를 바랍니다! 건배.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.