limit wyników każdego w pliku handlebars.js

Question

Napisałem małą wtyczkę, która wyświetla tweety. Poniżej znajduje się kod, który wykonuje pętlę i wyświetla tweety.

<script id="tweets-template" type="text/x-handlebars-template" > 
     {{#each this}} 
     <li> 
     <p>{{tweet}}</p> 
      <span id="author">{{author}}<span/> 
     </li> 
     {{/each}} 
    </script> 

Ale to, co chcę zrobić, to ograniczyć liczbę tweets do 5 lub 10. Ale pętla jest wykaz wszystkich dostępnych tweety. Jak ograniczyć tweety jak w pętli for. jak

for(i=0;i<5;i++){display the tweets} 

Answer 1

myślę, że masz dwie opcje:

1. ograniczenie wielkości swojej kolekcji przed przekazaniem go do kierownicy.
2. Napisz własny blok pomocniczy, który pozwala określić limit.

Rzeczywista each implementation jest dość prosta więc dostosowanie go do obejmują górny limit jest dość prosta:

// Warning: untested code 
Handlebars.registerHelper('each_upto', function(ary, max, options) { 
    if(!ary || ary.length == 0) 
     return options.inverse(this); 

    var result = [ ]; 
    for(var i = 0; i < max && i < ary.length; ++i) 
     result.push(options.fn(ary[i])); 
    return result.join(''); 
}); 

Następnie w szablonie:

<script id="tweets-template" type="text/x-handlebars-template" > 
    {{#each_upto this 5}} 
     <li> 
      <p>{{tweet}}</p> 
      <span id="author">{{author}}<span/> 
     </li> 
    {{/each_upto}} 
</script> 

Answer 2

„każdy” nie jest już bardzo proste: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

To dlatego, że teraz każdy obsługuje cały szereg informacji o pętli ably chcą nadal mieć dostęp.

Wcześniejsze ograniczanie danych jest prawdopodobnie lepsze, jeśli nie chcesz ponownie wdrażać dużo bardziej skomplikowanych. Możesz także spróbować użyć podwyrażenia w ramach każdego z nich (np. {{#each (limit danych 6)}}, jeśli używasz najnowszej wersji kierownicy.

Answer 3

Zgadzam się, że powielenie each obecnie nie jest dobrym pomysłem, . jako Dtipson mówi

Jego proponowane podejście z limit pomocnika jest rzeczywiście najlepszym sposobem IMO, tutaj jest kod potrzebny do jego realizacji:

// limit an array to a maximum of elements (from the start) 
Handlebars.registerHelper('limit', function (arr, limit) { 
    if (!_.isArray(arr)) { return []; } // remove this line if you don't want the lodash/underscore dependency 
    return arr.slice(0, limit); 
}); 

I wtedy w szablonie (zakładając, że tablica jest cart.products) :

{{#each (limit cart.products 5)}} 
    <li>Index is {{@index}} - element is {{this}}</li> 
{{/each}} 

Potrzebujesz nowej wersji kierownicy, która obsługuje wyrażenia podrzędne, aby to działało.

Answer 4

Wystarczy spojrzeć na wartość {{@index}} i zawinąć ją w blok {{#if}}. Jeśli indeks, jeśli jest większy niż pewna liczba, nie renderuje znaczników.

var collection = { ... tweets ... } 

{{#each collection}} 
    {{#if @index < 5}} 
     <tweet markup> 
    {{/if}} 
{{/each}}