Как мне получить доступ к элементу массива access по индексу в handlebars?

ProgramBox

Как мне получить доступ к элементу массива access по индексу в handlebars?

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript #handlebars.js

Вопрос:

Я пытаюсь указать индекс элемента в массиве в шаблоне handlebars:

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

используя это:

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

Если вышеуказанное невозможно, как бы мне написать помощник, который мог бы получить доступ к специальному элементу в массиве?

Ответ №1:

Попробуйте это:

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

1. Я получаю Expecting 'ID' ошибку с {{user.links. веб-сайты. 1}} или {{user.links. веб-сайты.0}}

2. @OlivierLalonde, мне пришлось использовать что-то вроде {{ websites.[0] }} .

3. Действительно, @Matt, это не просто какой-то удачный формат, но и своего рода документированный синтаксис. (Смотрите Мой ответ.)

4. Для ember.js мне пришлось сделать что-то вроде people.content.1.name

5. @lukemh МНОГИЕ вещи в handlebars либо плохо документированы, либо вообще нигде не документированы. Урааа….

Ответ №2:

Следующее, с дополнительной точкой перед индексом, работает точно так, как ожидалось. Здесь квадратные скобки необязательны, когда за индексом следует другое свойство:

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

Однако квадратные скобки обязательны в:

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

В последнем случае использование номера индекса без квадратных скобок дало бы единицу:

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

В качестве отступа: скобки (также) используются для синтаксиса литерала сегмента, чтобы ссылаться на фактические идентификаторы (не номера индексов), которые в противном случае были бы недействительными. Подробнее в Что такое действительный идентификатор?

(Протестировано с помощью Handlebars в YUI.)

Обновление 2.xx

Теперь вы можете использовать get помощник для этого:

 (get people index)

хотя, если вы получите сообщение об ошибке о том, что индекс должен быть строкой, выполните:

 (get people (concat index ""))

1. Это должен быть ответ, потому что он более подробный, чем выбранный ответ. Требование квадратных скобок, когда индекс находится в конце, заставило меня на некоторое время застрять!

2. это сделало свое дело! Спасибо… выбранный выше ответ этого не сделал, пожалуйста, отметьте это как правильное.

3. {{#with people.1}} Решение сработало для меня, используя com.github.jknack:handlebars:4.1.2 .

4. пытаюсь найти способ настроить номер индекса, чтобы я мог сверить значение из предыдущего элемента в цикле с этим. Есть идеи?

Ответ №3:

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

1. Потрясающе, это правильный ответ. @index укажет вам позицию в массиве.

2. Правильный ответ, кто-нибудь может мне помочь, как я могу напечатать индекс, начинающийся с 1. По умолчанию он начинается с 0.

Ответ №4:

Если недокументированные функции не для вас, то то же самое можно сделать здесь:

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

Затем в шаблоне

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

Я написал выше, прежде чем получил доступ к

 this.[0]

Я не вижу, чтобы кто-то заходил слишком далеко с handlebars без написания собственных помощников.

Ответ №5:

Если вы хотите использовать динамические переменные

Это не сработает:

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

Вам нужно сделать:

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

смотрите помощник по поиску в handlebars и подвыражения в handlebars.

Ответ №6:

Пожалуйста, попробуйте это, если вы хотите получить первый / последний.

 {{#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', 
 attr: [ 'boo', 'zoo']
 }, 
{ 
 имя: 'bar', 
 attr: ['far', 'zar' ]
 }
]

Вот handlebars для получения первого элемента в attr массиве.

{{#каждый игрок}}
 <p> {{this.name }} </p>

 {{#с помощью this.attr}}
 <p> {{это.[0]}} </p>
 {{/with}}

{{/каждый}}

Это приведет к

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

<p> панель </p>
<p> далеко </p>

1. если в массиве attr разное количество элементов для разных объектов, то каким будет процесс итерации по нему? например: [ { name: ‘foo’, attr: [‘boo’, ‘zoo’] }, { name: ‘bar’, attr: [‘far’, ‘zar’, ‘sar ] } ] тогда как вы собираетесь показывать все attr для каждого объекта массива?

2. я не пробовал это, но я предполагаю, что in {{#with this.attr}} this будет работать вместо this.[0]

Ответ №8:

Следующий синтаксис также может быть использован, если массив не назван (в шаблон передается только массив):

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

Ответ №9:

В моем случае я хотел получить доступ к массиву внутри пользовательского помощника следующим образом,

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

Который не сработал, но ответ, предложенный @julesbou, сработал.

Рабочий код:

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

Надеюсь, это поможет! Приветствия.