Licznik kierownicy #each

Question

W Kierownice, że mam kolekcję names jak mogę zrobić

{{#each names}} 
{{position}} 
{{name}} 
{{/each}} 

gdzie {{position}} jest 1 dla pierwszego imienia, 2 dla drugiego imienia itd. Czy Absolutnie muszę przechowywać pozycję jako klucz do kolekcji?

Answer 1

Chociaż nie można tego zrobić z żadnym natywnym pomocnikiem Handlebars, można utworzyć własny. Możesz zadzwonić pod numer Handlebars.registerHelper(), przekazując mu ciąg znaków z nazwą, którą chcesz dopasować (pozycja), i funkcją, która zwróci aktualną liczbę pozycji. Możesz śledzić numer pozycji w zamknięciu, pod którym dzwonisz pod numer registerHelper. Oto przykład, w jaki sposób można zarejestrować pomocnika o nazwie position, który powinien działać z przykładem twojego szablonu.

JavaScript:

// Using a self-invoking function just to illustrate the closure 
(function() { 
    // Start at 1, name this unique to anything in this closure 
    var positionCounter = 1; 

    Handlebars.registerHelper('position', function() { 
     return positionCounter++; 
    }); 

    // Compile/render your template here 
    // It will use the helper whenever it seems position 
})(); 

Oto jsFiddle wykazać: http://jsfiddle.net/willslab/T5uKW/1/

Podczas pomocnicy są udokumentowane na handlebarsjs.com, trwało to trochę wysiłku dla mnie, aby dowiedzieć się, jak z nich korzystać. Dzięki za wyzwanie i mam nadzieję, że pomoże!

Answer 2

Można to zrobić za pomocą wbudowanego w notacji Kierownice @index:

{{#each array}} 
    {{@index}}: {{this}} 
{{/each}} 

@index da (zero-based) indeks każdej pozycji w danej tablicy.

Uwaga dla osób posługujących się kierownicą z przeglądarką Razor należy użyć indeksu notacji @@, aby uniknąć błędów kompilacji.

Przez wbudowaną pomocników zobaczyć http://handlebarsjs.com/

Answer 3

tylko trzeba użyć {{@index}}

przykład:

{{#.}} 
<li class="order{{@index}}"> counter: {{@index}}</li> 
{{/.}} 

Answer 4

Oto moja preferowanym rozwiązaniem. Zarejestruj pomocnika, który rozszerza kontekst, aby automatycznie uwzględnić twoją własność pozycji. Następnie użyj nowego bloku pomocy (np. #iter) zamiast #each.

Handlebars.registerHelper('iter', function (context, options) { 
    var ret = ""; 

    for (var i = 0, j = context.length; i < j; i++) { 
     ret += options.fn($.extend(context[i], {position: i + 1})); 
    } 

    return ret; 
}); 

Zastosowanie:

{{#iter names}} 
    {{position}} 
    {{name}} 
{{/iter}} 

adaptacją http://rockycode.com/blog/handlebars-loop-index/

Answer 5

Handlebars.registerHelper("counter", function (index){ 
    return index + 1; 
}); 

Wykorzystanie:

{{#each names}} 
    {{counter @index}} 
    {{name}} 
{{/each}} 

Answer 6

można uzyskać tylko od wartości indeksu wewnątrz listy.

{{#each list}} 
    @index 
{{/each}}