it-swarm-pt.tech

Índice de um elemento de matriz no Mustache.js

É isso que eu gostaria de fazer no Mustache.js, mas não vendo como na documentação.

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

Saída desejada:

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

Uma solução alternativa, sem brincar com o Mustache.js

Em vez de brincar com bigode, você também pode usar um <ol></ol> ao invés de <ul></ul>, que prefixará cada item com index+1.

Se você quiser, pode usar css para alterar o número inicial para 0, e ele será renderizado exatamente como você deseja. Você pode até alterar dot após o número, para algo como " - ", e o problema está resolvido.

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

o acima será renderizado como:

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

a maneira do Mustache.js de fazer isso

O método adequado, se você quiser fazer isso no bigode, é converter sua matriz de seqüências de caracteres em uma matriz de objetos, onde o valor do índice e da string está presente.

// 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);
17
Filip Roséen - refp

Procurando uma solução rápida e limpa?

Basta adicionar uma função index

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

e seu modelo pode ser assim:

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

Como funciona

Nós adicionamos uma index: function(){} aos dados e a usamos como uma função normal no template. Esta função adiciona uma chave ao objeto window que está disponível globalmente; depois aumenta um por um.

Para usar com várias listas

Observe que, se você estiver usando vários modelos, um após o outro, precisará redefinir window['INDEX'] Ou alterar sua chave para algo mais como window['YEKI_DIGE']. Outra maneira de fazer isso é adicionando uma função resetIndex. Aqui está o caminho:

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;
    }
}

e seu modelo pode ser assim:

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

Inspirado por esta resposta: https://stackoverflow.com/a/10208239/257479 from dave on No Bigode, Como obter o índice do atual Seção

20
Alexar

Se você pode usar o handlebars.js, pode usar o parcial mencionado neste Gist: https://Gist.github.com/1048968

Ref: No Bigode, Como obter o índice da Seção atual

4
rnella01

Se você deseja acessar o índice várias vezes por item, sugiro algo como o seguinte.

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;
    }
}
  • Use a função restIndex antes de iterar cada lista no Bigode.
  • Use a função setUpIndex no início de cada item da lista para configurar o índice para esse item.
  • Use o item getIndex para acessar o índice.

Como exemplo, considere isso.

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

Observe como você pode acessar o índice mais de uma vez por item sem obter o valor errado.

3
Tayyab

(Testado no nó 4.4.7, bigode 2.2.1.)

Se você deseja uma maneira funcional limpa e agradável de fazê-lo, que não envolva variáveis ​​globais ou modifique os próprios objetos, use esta função;

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

Use-o quando estiver montando sua visualização;

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

O interessante dessa abordagem é que ela cria um novo conjunto de objetos 'viewmodel', usando o conjunto antigo como protótipo. Você pode ler o person.id exatamente como você leria person.firstName. No entanto, essa função não altera os objetos de pessoas, portanto, outro código (que pode ter se baseado na propriedade de ID não estar lá) não será afetado.

1
Steve Cooper

Você pode usar o Handlebars.js e, em seguida,

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

Para usá-lo em HTML

{{inc @@index}}
0
Elaine