группы и отображения данных

Question

Вот мои данные

data = [ 
    { category : "Cat1"}, 
    { category : "Cat2"}, 
    { category : "Cat3"}, 
    { category : "Cat4"}, 
    { category : "Cat5"}, 
    { category : "Cat6"}] 

Пусть Предположим, у меня есть это в коллекции под названием MyData

Что я хочу, чтобы сгруппировать и отобразить мои данные в группе 2. Тогда я отобразить его в навигационной панели (в выпадающем списке на самом деле), как этот

<ul> 
{{#each group}} 
<li class="col-md-2"> 
    <ul> 
    {{#each categories}} 
    <li>{{category}}</li> 
    {{/each}} 
    </ul> 
{{/each}} 
<ul> 

То, что я спрашиваю, как группировать данные в моих помощников или в MongoDB, так что я мог бы получить этот результат.

Answer 1

Вы можете разбить его на группы по 2 внутри помощника, используя подчеркивание-х map и compact

Template.hello.helpers({ 
    groups() { 
    // var data = myData.find().fetch(); 
    var data = [ 
     { category : "Cat1"}, 
     { category : "Cat2"}, 
     { category : "Cat3"}, 
     { category : "Cat4"}, 
     { category : "Cat5"}, 
     { category : "Cat6"}]; 

     return _.chain(data).map(function(item, index){ 
     return (index % 2) ? false : data.slice(index, index + 2); 
     }).compact().value(); 
    }, 
}); 

Затем в шаблоне вы можете использовать вложенную #each in Переберите групп

<template name="hello"> 
    <ul> 
    {{#each group in groups}} 
     <li class="col-md-2"> 
     <ul> 
      {{#each category in group}} 
      <li>{{category.category}}</li> 
      {{/each}} 
     </ul> 
     </li> 
    {{/each}} 
    </ul> 
    </template> 

Answer 2

Я не 100% ясно, что вы имеете в виду под «группой», но если вы используете Boostrap NavBar выпадающие, вы могли бы сгруппировать их с разделителями:

{{#each categories}} 
    <li>{{category}}</li> 
    {{#if doSeparator @index}} 
     <li role="separator" class="divider"></li> 
    {{/if} 
{{/each}} 

и помощник doSeparator идет в вашем. JS файл:

doSeparator(index) { 
    return (index % 2); 
} 

Если с другой стороны, вы хотите подменю для каждой группы вам нужно будет реорганизовать массив в двух уровнях.

Answer 3

Другим подходом может быть:

<ul> 
    {{#each groups}} 
    <li> 
     <ul> 
     {{#each this}} 
     <li>{{category}}</li> 
     {{/each}} 
     </ul> 
    </li> 
    {{/each}} 
</ul> 

Затем в шаблоне помощник:

import { Template } from 'meteor/templating'; 
import chunk from 'lodash/chunk'; 

import { myData } from '/imports/api/mydata/collection'; 
import './main.html'; 

Template.someTemplate.helpers({ 
    groups() { 
    return chunk(myData.find().fetch(), 2); 
    }, 
}); 

Это использует chunk функцию lodash, чтобы разделить возвращаемый массив в группировках 2 предметов (так что вы хотите, чтобы meteor npm install --save lodash, если вы еще не сделали).

выше даст вам выход, как:

<ul>  
    <li> 
    <ul>  
     <li>1</li>  
     <li>2</li>  
    </ul> 
    </li> 
    <li> 
    <ul>  
     <li>3</li>  
     <li>4</li>  
    </ul> 
    </li> 
    <li> 
    <ul>  
     <li>5</li>  
     <li>6</li>  
    </ul> 
    </li> 
</ul>