如何填充引导网格系统使用Meteor.js中的每个命令的句柄？ [英] How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

问题描述

我试图每行显示3个项目。我的模板如下所示：（UPDATED）

 < template name =projectList> 
 {{breakTimeReset}} 
< div class = row> 
 {{#each projects}} 
 
 {{> projectItem}} 
 
 {{#if breakTime}} 
< / div> 
< div class = row> 
 {{/ if}} 
 
 {{/ each}} 
< / div> 
< / template> 
  

正如你可以看到数据库中的每个项目我输出projectItem。我想输出他们所以每3个项目包裹在一个

这是我的js帮助

  Template.projectList.helpers（{
 projects：function（）{
 return Projects.find（）; 
}，
 breakTimeReset：function {
 Template.projectList.doCount = 0; 
}，
 breakTime：function（）{
 count = Template.projectList.doCount + 1; 
 console.log （count）; 
 Template.projectList.doCount = count; 
 
 if（count％3 == 0）{
 console.log（Started break）; 
 return true; 
} 
 else 
 return false; 
} 
}）; 
  

我的问题是如何设置它，所以每行有3个项目，然后它知道在每3个项目后插入一个新的div div？我目前设置的方式导致非常有趣的结果，因为它是不可靠的，因为新的div将在项目之前插入。

请在这里查看结果： http：//testprojectapp.meteor。 com

你会看到第一行显示确定，但后来我得到一些有趣的结果。如果你通过查看页面源检出DOM，你会看到不匹配我的代码，这是奇怪的。

让我知道这是一个令人困惑的问题。谢谢！

解决方案

您可以在呈现之前对数据进行分组：

  Template.projectList.helpers（{
 projects：function（）{
 all = Projects.find（{}）。fetch（）; 
 chunks = []; 
 size = 3 
 while（all.length> 3）{
 chunks.push（{row：all.slice（0，3）}）; 
 all = all.slice（3）; 
} 
 chunks.push（{row：all}）; 
 return chunks; 
}，
 breakTimeReset：function ）{
 Template.projectList.doCount = 0; 
}，
 breakTime：function（）{
 count = Template.projectList.doCount + 1; 
 console。 log（count）; 
 Template.projectList.doCount = count; 
 
 if（count％3 == 0）
 return< / div>为什么？ - >< div class ='row'>
 else 
 return
} 
} 
 
< template name =projectList> 
 {{breakTimeReset}} 
 {{#each projects}} 
 {{> projectRow}} 
 {{/ each}} 
< / template> 
 
< template name ='projectRow'> 
< div class ='row span12'> 
 {{#each row}} 
 {{> projectItem}} 
 {{/ each}} 
< / div> 
< / template> 
 
< template name =projectItem> 
< div class =span4> 
< h3>< a href ={{projectPagePath this}}> {{title}}< / a>< / h3> 
< p> {{subtitle}}< / p> 
< p> {{description}}< / p> 
< p>< img src ={{image}}/>< / p> 
< p> {{openPositions}}< / p> 
< / div> 
< / template>对不起，我错过了这么多次，nearpoint！
 
 

I am trying to display 3 projects per row. My template looks like this: (UPDATED)

 <template name="projectList">
   {{breakTimeReset}}
   <div class=row>          
  {{#each projects}}

    {{> projectItem}}

        {{#if breakTime}}
        </div>
        <div class=row>
        {{/if}}

   {{/each}}
   </div>
</template>

As you can see for each project in the database I output projectItem. I want to output them so every 3 project are wrapped in a

This is my js helper

Template.projectList.helpers({
    projects: function() {
        return Projects.find();
    },
    breakTimeReset: function() {
        Template.projectList.doCount = 0;
    },
    breakTime: function () {
        count = Template.projectList.doCount + 1;
        console.log(count);
        Template.projectList.doCount = count;

        if (count % 3 == 0) {
            console.log("Started break");
            return true;
        }
        else
            return false;
    }
});

My question is how can I set it up so there are 3 projects per row, and then it knows to insert a new row div after every 3 projects? The way I have it currently setup leads to really funky results, as it is not reliable in that the new div will be inserted before the project.

Check out the results here: http://testprojectapp.meteor.com

You will see that the first row shows up ok but then I get some funky results after that. And if you check out the DOM through viewing page source you will see that the dont match my code which is weird.

Let me know if this is a confusing question. Thanks!

解决方案

You can group your data before it gets rendered:

Template.projectList.helpers({
    projects: function () {
        all = Projects.find({}).fetch();
        chunks = [];
        size = 3
        while (all.length > 3) {
            chunks.push({ row: all.slice(0, 3)});
            all = all.slice(3);
        }
        chunks.push({row: all});
        return chunks;
    },
    breakTimeReset: function () {
        Template.projectList.doCount = 0;
    },
    breakTime: function () {
        count = Template.projectList.doCount + 1;
        console.log(count);
        Template.projectList.doCount = count;

        if (count % 3 == 0)
            return "</div><!-- why? --><div class='row'>"
        else
            return ""
    }
});

<template name="projectList">
  {{breakTimeReset}}
  {{#each projects}}
    {{> projectRow }}
  {{/each}}
</template>

<template name='projectRow'>
  <div class='row span12'>
    {{#each row }}
      {{> projectItem}}
    {{/each}}
  </div>
</template>

<template name="projectItem">
  <div class="span4">
    <h3><a href="{{projectPagePath this}}"> {{title}} </a></h3>
    <p> {{subtitle}} </p>
    <p> {{description}} </p>
    <p><img src="{{image}}"/></p>
    <p> {{openPositions}} </p>
  </div>
</template>

Sorry I missed so many times, nearpoint!

这篇关于如何填充引导网格系统使用Meteor.js中的每个命令的句柄？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！