组和显示数据

这里是我的数据组和显示数据

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中，这样我可以得到这个结果的数据。

来源

2016-08-03 Stephane Joel

所以各组取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(); 
    }, 
});

然后把它分解成一个助手里面的2组，在你的模板，你可以通过组使用嵌套#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>

来源

2016-08-03 14:48:45 Kalman

这是我的知识以上，但我会尝试做到这一点，我试图了解它是否可以工作 –

下划线JS库已经与流星 - 参见http://underscorejs.org/（在链接上搜索“链” 'map'和'compact'方法）。 '#each in'在这里http://meteorcapture.com/spacebars/#each – Kalman

我不是100％清楚你所说的“团”的意思，但假设你使用的自举导航栏的下拉列表中，你可以将它们与分离器组：

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

和doSeparator助手去你的。 js文件：

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

如果在另一方面，你要为每个组，您将需要重新组织阵列中的两个级别的子菜单。

来源

2016-08-03 14:30:38

是啊，我用引导导航栏的下拉列表中，但我想知道我应该放入我的帮手，将我的类别2加2。您的doSeparator是否已将其分组？ –

“小组”可能是很多事情。用我的答案中的代码，你会在每两个项目后得到一个分隔符。（索引％2）是索引模数2，当索引为1,3,5等时为真。因此，这些项目将在菜单中在视觉上分组为2和2。或者你想要菜单中每一行的项目，那你的意思是“组”吗？ –

是的，它将你的数组分组给你的帮手。很好的答案！ – sapna

另一种方法可以是：

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

本品采用lodash的chunk功能分割返回数组成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>

来源

2016-08-03 15:04:51 hwillson

组和显示数据

回答

相关问题