Приращение Emberjs в шаблоне

Я чувствую, что могу многое сделать для простой проблемы.

Если index = 0как мне увеличить index в шаблоне.

В идеале я хотел бы сделать что-то подобное.

{{index+1}}

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

import Ember from 'ember';

export function plusOne(params) {
  return parseInt(params) + 1;
}

export default Ember.HTMLBars.makeBoundHelper(plusOne);

И тогда в шаблоне вы будете делать следующее.

{{plus-one index}}

Надеюсь, я ошибаюсь, и есть гораздо более простой способ сделать это. И, возможно, более простой способ сделать "простую" обработку в шаблоне. Не уверен, что может быть возражение, потому что в шаблоне может быть логика "слишком много".

Любое руководство по этому вопросу будет принята с благодарностью.

Спасибо!

3 ответа

Решение

Короткий ответ - нет. В шаблонах нет никакой реальной вычислительной логики. Помощник - ваш лучший выбор для добавления 1 к индексу в шаблоне.

Конечно, можно задаться вопросом, почему вы все равно хотите добавить +1 к любому индексу? возможно маркировать ваши итемы ненулевым способом? в этом случае вы бы не отображали упорядоченный список?

<ol>
  {{#each model as |foo|}}
    <li>{{foo.bar}}</li>
  {{/each}}
</ol>

В результате чего:

  1. Я дурак
  2. Я тоже фу!
  3. Я фу три!

другая возможность - это (как альтернатива использованию помощника для каждого индекса)

model: ['Foo', 'Man', 'Chu']

foosWithCount: Ember.computed.map('model', function(foo, index) {
  return Ember.Object.create({
    name: foo,
    count: index + 1
  });
});

затем

{{#each foosWithCount as |foo|}}
  <p>I'm {{foo.name}} and I'm #{{foo.count}}</p>
{{/each}}

В результате чего:

Я Фу и я № 1

Я человек и я № 2

Я Чу и я № 3

Изучая Эмбер, я тоже много боролся с этой проблемой. Я создал суть, показывающую, как это можно сделать с помощью очень простого вспомогательного метода Handlebars.

https://gist.github.com/makabde/7d38d09d28b2a167b003

И тогда все, что вам нужно сделать, это вызвать этого помощника с {{your-helper-method index}}; затем он должен вывести индекс, увеличенный на 1, или любой другой шаг, который вы установили в своем вспомогательном методе.

Если вам нужен доступ к индексу в каждом блоке, используйте:

<ul>
  {{#each model as |foo index|}}
   <li>{{index}} : {{foo.bar}}</li>
  {{/each}}
</ul>

см: этот ответ

Затем вы можете использовать вспомогательный шаблон для преобразования из индекса в позицию.

Пример JSBin

Я использую ember-composable-helpers inc hepler

{{#each model as |foo index|}}
  {{inc index}}
{{/each}}
Другие вопросы по тегам