В Усы, Как получить индекс текущего раздела - PullRequest
Новая
       28

В Усы, Как получить индекс текущего раздела

55 голосов
/ 16 февраля 2011

Я использую Усы и использую данные 

{ "names": [ {"name":"John"}, {"name":"Mary"} ] }

Мой шаблон усов: 

{{#names}}
    {{name}}
{{/names}}

Что я хочу сделать, этополучить индекс текущего номера в массиве.Что-то вроде: 

{{#names}}
    {{name}} is {{index}}
{{/names}}

и распечатать его 

John is 1
Mary is 2

Возможно ли получить это с усами?или с рулем или другим расширением?

Ответы [ 12 ]

0 голосов
/ 28 декабря 2018 
<script>var index = 1;</script>
{{#names}}
    {{name}} is <script>document.write(index++);</script>
{{/names}}

Это прекрасно работает.

0 голосов
/ 29 ноября 2018

Рекомендованное решение

Я рекомендую добавить index ключ 

let data = { "names": [ {"name":"John"}, 
{"name":"Mary"} ] };

// Add an index manually
data = {
  names: [
    { id: 0, name: "John" },
    { id: 1, name: "Mary" }
  ]
};

// Add an index with a loop
data = data.names
  .map(function (name, i) {
    name.id = i;
    return name;
  });

// Nested arrays with indices (parentId, childId)
data = {
  names: [{
    parentId: 0,
    name: "John",
    friends: [{
      childId: 0,
      name: "Mary"
    }]
  }]
};

Другие предлагаемые решения не такие чистые, и страдают от довольно большого числапроблемы, как подробно описано ниже.

Проблемы с предлагаемыми решениями индекса усов

@ Index

Усы не поддерживают @ Index

IndexOf

Это решение выполняется за O (n ^ 2) времени, и поэтому оно не имеет наилучшей производительности.Также индекс должен быть создан вручную для каждого списка. 

const data = {
  list: ['a', 'b', 'c'],
  listIndex: function () {
    return data.list.indexOf(this);
  }
};

Mustache.render('{{#list}}{{listIndex}}{{/list}}', data);

Глобальная переменная

Это решение работает за O (n) времени, поэтому здесь производительность выше, нотакже «загрязняет глобальное пространство» (т. е. любые свойства, добавленные к объекту window, не собирают мусор до закрытия окна браузера), и для каждого списка необходимо создать индекс вручную. 

const data = {
  list: ['a', 'b', 'c'],
  listIndex: function () {
    return (++window.listIndex || (window.listIndex = 0));
  }
};

Mustache.render('{{#list}}{{listIndex}}{{/list}}', data);

Локальная переменная

Это решение выполняется за O (n) времени, не "загрязняет глобальное пространство" и не требует создания вручную для каждого списка.Однако решение является сложным и не работает с вложенными списками. 

const data = {
  listA: ['a', 'b', 'c'],
  index: () => name => (++data[`${name}Index`] || (data[`${name}Index`] = 0))
};

Mustache.render('{{#listA}}{{#index}}listA{{/index}}{{/listA}}', data);
Страница:
...