ein {{# each}} blockieren alle N Artikel

Question

Ich bin in einem Meteor Projekt arbeiten, die ein Raster von Benutzern angezeigt werden muss, wie hier gezeigt:

In Django war einfach, Ich würde den Listenzähler benutzen und sein Modulo erhalten, und wenn das Modul 0 war, dann würde ich den row div Umbau schließen und einen neuen row div Umbau hinzufügen.

{% if forloop.counter|divisibleby:'2' %} 
    </div> 
    <div class="row"> 
{% endif %} 

Aber wenn ich versuche, dies in einem Meteor-Vorlage zu tun:

Template.available_user_list.helpers({ 
    users: function() { 
    return Meteor.users.find(); 
    }, 
    count:()=>{ 
    return Meteor.users.find().count(); 
    }, 
    isModulo: function (dividend, divisor) { 
    return dividend % divisor == 0; 
    } 
}); 

html

<!-- display a list of users --> 
<template name="available_user_list"> 
    <h2>Choose someone to chat with:</h2> 
    <div class="row"> 
    {{#each users}} 
     {{> available_user}} 
     {{#if isModulo count 4 }} 
     </div> 
     <div class="row"> 
     {{/if}} 
    {{/each}} 
    </div> 
</template> 

bekomme ich folgende Fehlermeldung:

=> Errors prevented startup:
While processing files with templating (for target web.browser): client/templates/lobby_page.html:14: Unexpected HTML close tag ... if isModule tags.

I ca verwende das Muster nicht als Django. Wie kann ich eine neue Zeile alle N Elemente einfügen?

Answer 1

Ich bin nicht wirklich vertraut mit Meteor, aber das Muster, das ich verwenden würde, ist das Array in "Chunks" der gewünschten Größe zu teilen, dann über jeden Chunk für die Divs Schleife, dann Schleife über jeden Chunks Benutzer:

Template.available_user_list.helpers({ 
    users: function() { 
    return Meteor.users.find(); 
    }, 
    count:()=>{ 
    return Meteor.users.find().count(); 
    }, 
    chunks: function(chunkSize) { 
     var R = []; 
     var users = Meteor.users.find(); 
     for (var i=0,len=users.count(); i<len; i+=chunkSize) 
      R.push(users.slice(i,i+chunkSize)); 
      return R; 
    } 
}); 

<!-- display a list of users --> 
<template name="available_user_list"> 
    <h2>Choose someone to chat with:</h2> 
    {{#each chunk 4}} 
     <div class="row"> 
      {{#each .}} 
       {{> available_user}} 
      {{/each}} 
     </div> 
    {{/each}} 
</template> 

Answer 2

Sie können auch index dafür verwenden. Überprüfen Sie, ob der aktuelle Dok.-Index/Zähler durch Ihre geteilt ist. Du wirst also so etwas programmieren.

<template name="available_user_list"> 
    <h2>Choose someone to chat with:</h2> 
    <div class="row"> 
    {{#each users}} 
     {{> available_user}} 
     {{#if isModulo @index 4}} 
     {{{innerDivs}}} 
     {{/if}} 
    {{/each}} 
    </div> 
</template> 

Template.available_user_list.helpers({ 
    users: function() { 
    return Meteor.users.find(); 
    }, 
    isModulo: function (dividend, divisor) { 
    ++dividend; 
    return dividend % divisor == 0; 
    }, 
innerDivs: function(){ 
     return '</div><div class="row">'; 
} 
}); 

So Grundsätzlich müssen Sie nur noch @ setzen vor Zahl und erhöhen den Zählwert vor divide, weil seine mit 0 erstmals initialisieren. Sie müssen keinen Zählwert/Index von Helfer definieren. Ich hoffe, dass Sie alle Sinn machen.