Индекс элемента массива в Mustache.js - PullRequest
Новая
       6

Индекс элемента массива в Mustache.js

13 голосов
/ 20 декабря 2011

Это то, что я хотел бы сделать в Mustache.js, но не вижу, как с документацией. 

var view = {items:['Mercury','Venus','Earth','Mars']};
var template = "<ul> {{#items}}<li>{{i}} - {{.}}</li>{{/items}} </ul>";
var html = Mustache.to_html(template,view);

Желаемый вывод: 

<ul>
  <li>0 - Mercury</li>
  <li>1 - Venus</li>
  <li>2 - Earth</li>
  <li>3 - Mars</li>
</ul>

Ответы [ 6 ]

20 голосов
/ 31 октября 2013

Ищете быстрое чистое решение?

Просто добавьте index функцию 

var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
}

и ваш шаблон может выглядеть следующим образом: 

{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}

Как это работает

Мы добавляем index: function(){} к данным и используем его как обычную функцию в шаблоне.Эта функция добавляет ключ к объекту window, который доступен глобально;затем увеличивает его один за другим.

Для использования с несколькими списками

Обратите внимание, что если вы используете несколько шаблонов один за другим, вам нужно либо сбросить window['INDEX'], либо изменить его ключ на что-тоеще как window['YEKI_DIGE'].Еще один способ сделать это - добавить функцию resetIndex.Вот способ: 

var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}

и ваш шаблон может быть таким: 

{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}
{{resetIndex}}

Вдохновленный этим ответом: https://stackoverflow.com/a/10208239/257479 от Дейв на в усах, как получить индекс текущего раздела

17 голосов
/ 20 декабря 2011

Альтернативное решение, без дурака с Mustache.js

Вместо того, чтобы дурачиться с усами, вы также можете использовать <ol></ol> вместо <ul></ul>, который будет добавлять к каждому элементу index+1.

Если вы хотите, вы можете использовать css, чтобы изменить начальный номер на 0, и он будет отображаться именно так, как вы хотите. Вы можете даже изменить dot после числа на что-то вроде " - ", и проблема будет решена. 

<ol>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
</ol>

выше будет отображаться как: 

1. Mercury
2. Venus
3. Earth
4. Mars

Mustache.js способ сделать это

Правильный метод, если вы хотите сделать это усами, - преобразовать ваш массив строк в массив объектов, где присутствует индекс и строковое значение. 

// I wrote this from the back of my head, it's untested and not guaranteed
// to work without modifications, though the theory behind it is valid.


var array     = ["123","stackoverflow","abc"];
var obj_array = [];

for (idx in array)
   obj_array.push ({'index': idx, 'str': array[idx]});

var view     = {items: obj_array};
var template = "<ul>{{#items}}<li>{{index}} - {{str}}</li>{{/items}}</ul>";
var html     = Mustache.to_html(template,view);
4 голосов
/ 27 января 2012

Если вы можете использовать handlebars.js, то вы можете использовать частичное, упомянутое в этой сущности: https://gist.github.com/1048968

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

3 голосов
/ 06 марта 2014

Если вы хотите получить доступ к индексу несколько раз для каждого элемента, я бы предложил что-то вроде следующего: 

var data = {
    items: [{
        name: Aliasghar
        , grade: 19
    }, {
        name: Afagh
        , grade: 20
    }]
    , setUpIndex: function() {
        ++window['INDEX']||(window['INDEX']=0);
        return;
    }
    , getIndex: function() {
        return window['INDEX'];
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}
  • Используйте функцию restIndex перед повторением каждого списка в Усы.
  • Используйте функцию setUpIndex в начале каждого элемента списка, чтобы установить индекс для этого элемента.
  • Используйте элемент getIndex для доступа к индексу.

В качестве примера рассмотрим это. 

{{resetIndex}}
{{#items}}
    {{setUpIndex}}
    {{getIndex}}. {{name}} is at index {{getIndex}}
{{/items}}

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

1 голос
/ 21 июля 2016

(протестировано в узле 4.4.7, усы 2.2.1.)

Если вам нужен хороший чистый функциональный способ сделать это, не задействуя глобальные переменные или изменяя сами объекты, используйте этоfunction; 

var withIds = function(list, propertyName, firstIndex) {
    firstIndex |= 0;
    return list.map( (item, idx) => {
        var augmented = Object.create(item);
        augmented[propertyName] = idx + firstIndex;
        return augmented;
    })
};

Используйте его при сборке вида; 

var view = {
    peopleWithIds: withIds(people, 'id', 1) // add 'id' property to all people, starting at index 1
};

Изюминкой этого подхода является то, что он создает новый набор объектов 'viewmodel', используястарый набор в качестве прототипов.Вы можете прочитать person.id так же, как вы прочитали бы person.firstName.Однако эта функция вообще не меняет ваши объекты people, поэтому на другой код (который мог бы полагаться на отсутствие свойства ID) это не повлияет.

0 голосов
/ 28 июля 2015

Вы можете использовать Handlerbars.js, затем 

Handlebars.registerHelper("inc", function (value, options) {
    return parseInt(value) + 1;
});

Для использования в HTML 

{{inc @@index}}
...