Właśnie to chciałbym zrobić w Wąsach.js, ale nie widząc, jak z dokumentacją.

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

Pożądane wyjście:

<ul>
  <li>0 - Mercury</li>
  <li>1 - Venus</li>
  <li>2 - Earth</li>
  <li>3 - Mars</li>
</ul>
14
Dane 20 grudzień 2011, 00:52

6 odpowiedzi

Najlepsza odpowiedź

Alternatywne rozwiązanie, bez oszukania woks.js

Zamiast wygłupiać się z wąsami, możesz równie dobrze użyć <ol></ol> zamiast <ul></ul>, który prefektuje każdy element za pomocą index+1.

Jeśli chcesz użyć CSS, aby zmienić numer startowy na 0, a on będzie on dokładnie tak, jak chcesz. Możesz nawet zmienić dot po numerze, na coś takiego jak " - ", a problem został rozwiązany.

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

Powyższe uda się:

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

Wąsy.js sposób, aby to zrobić

Właściwa metoda, jeśli chcesz to zrobić w wąsach, jest przekształcenie tablicy łańcuchów do tablicy obiektów, w których obecna jest wartość indeksu i ciągów.

// 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);
18
Community 20 czerwiec 2020, 09:12

Szukasz szybkiego czystego rozwiązania?

Po prostu dodaj funkcję index

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

A twój szablon może być taki:

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

Jak to działa

Dodajemy index: function(){} do danych i używamy go jako normalnej funkcji w szablonie. Ta funkcja dodaje klucz do obiektu {X1}}, który jest dostępny na całym świecie; Następnie zwiększa go jeden po drugim.

Używać z wieloma listami

Należy pamiętać, że jeśli używasz wielu szablonów jeden po drugim, musisz albo zresetować window['INDEX'] lub zmienić to klucz do czegoś innego jak window['YEKI_DIGE']. Innym sposobem na to jest, dodając funkcję resetIndex. Oto sposób:

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

A twój szablon może być taki:

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

Zainspirowany tą odpowiedzią: https://stackoverflow.com/a/10208239/257479 z Dave na W wąsach, jak uzyskać indeks bieżącej części .

20
Community 23 maj 2017, 10:31

Jeśli możesz użyć kierownictwa.js, możesz użyć częściowego wspomnianego w tym GIST: https://gist.github.com/1048968

Ref: w wąsach, jak uzyskać indeks obecnej części

4
Community 23 maj 2017, 12:34

Jeśli chcesz uzyskać dostęp do indeksu wielokrotnie na przedmiocie, sugerowałbym coś takiego jak następujące.

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;
    }
}
  • Użyj funkcji restIndex przed iterowanie każdej listy w wąsach.
  • Użyj funkcji setUpIndex na początku każdej pozycji listy, aby skonfigurować indeks tego elementu.
  • Użyj elementu getIndex, aby uzyskać dostęp do indeksu.

Jako przykład uważaj to za przykład.

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

Zauważ, w jaki sposób możesz uzyskać dostęp do indeksu więcej niż raz na element bez uzyskania niewłaściwej wartości.

3
teon 12 lipiec 2015, 23:51

Możesz użyć kierownictwa.js.

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

Używać go w HTML

{{inc @@index}}
1
Elaine 28 lipiec 2015, 04:16

(Testowany w węźle 4.4.7, Wąsy 2.2.1.)

Jeśli chcesz miłego czystego funkcjonalnego sposobu, aby to zrobić, to nie wiąże się z zmiennymi globalnymi ani nie zwracając samych obiektów, użyj tej funkcji;

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

Użyj go, gdy montażujesz swój widok;

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

Schludną rzeczą w tym podejściu jest to, że tworzy nowy zestaw obiektów "ViewModel", używając starego zestawu jako prototypów. Możesz przeczytać person.id, tak jak przeczytałbyś person.firstName. Jednak ta funkcja nie zmienia żadnych obiektów ludzi, więc inny kod (co mogło polegać na właściwości ID, a nie jest tam) nie zostaną naruszone.

1
Steve Cooper 21 lipiec 2016, 09:24