javascript - Hur får jag åtkomst till ett arrayelement med index i handlebars?

Jag försöker specificera indexet för ett objekt i en array inom en Handlebars-mall:

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

använder detta:

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

Om det ovanstående inte är möjligt, hur skulle jag skriva en hjälpfunktion som kan komma åt ett specifikt objekt i arrayen?

Svar #1

Prova detta:

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

Svar #2

Följande, med en extra punkt före indexet, fungerar precis som förväntat. Här är hakparenteserna valfria när indexet följs av en annan egenskap:

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

Dock krävs hakparenteserna i:

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

I det senare skulle man genom att använda indexnumret utan hakparenteserna få:

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

För övrigt: parenteserna används (också) för segment-literal syntax, för att referera till faktiska identifierare (inte indexnummer) som annars skulle vara ogiltiga. Fler detaljer i Vad är en giltig identifierare?

(Testat med Handlebars i YUI.)

2.xx Uppdatering

Du kan nu använda get-hjälpen för detta:

(get people index)

men om du får ett fel om att index måste vara en sträng, gör:

(get people (concat index ""))

Svar #3

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

Svar #4

Om odokumenterade funktioner inte är din grej, kan samma sak uppnås här:

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

Sedan i en mall

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

Jag skrev ovanstående innan jag fick tag på

this.[0]

Jag kan inte se någon komma särskilt långt med Handlebars utan att skriva sina egna hjälpfunktioner.

Svar #5

Om du vill använda dynamiska variabler

Det här kommer inte att fungera:

{{#each obj[key]}}
...
{{/each}}

Du behöver göra:

{{#each (lookup obj key)}}
...
{{/each}}

se handlebars lookup-helper och handlebars underuttryck.

Svar #6

Var vänlig prova detta, om du vill hämta först/sist.

{{#each list}}

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

{{/each}}


{{#each list}}

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

{{/each}}

Svar #7

Medan du loopar i en array med each, och om du vill komma åt en annan array i kontexten av det aktuella objektet gör du det på det här sättet.

Här är exempeldata.


[
  {
    name: 'foo',
    attr: [ 'boo', 'zoo' ]
  },
  {
    name: 'bar',
    attr: [ 'far', 'zar' ]
  }
]

Här är handlebars för att få det första objektet i attr-arrayen.

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

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

{{/each}}

Detta kommer att skriva ut

<p> foo </p>
<p> boo </p>

<p> bar </p>
<p> far </p>

Relaterade artiklar