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

问题描述

我正在尝试每行显示 3 个项目.我的模板如下所示:(更新)

 <模板名称="projectList">{{breakTimeReset}}<div类=行>{{#每个项目}}{{>项目项}}{{#if breakTime}}

<div类=行>{{/如果}}{{/每个}}

如您所见，我输出了数据库中的每个项目的 projectItem.我想输出它们，所以每 3 个项目都包含在一个

这是我的js助手

Template.projectList.helpers({项目:函数(){返回 Projects.find();},breakTimeReset:函数(){Template.projectList.doCount = 0;},休息时间:函数(){计数 = Template.projectList.doCount + 1;控制台日志(计数)；Template.projectList.doCount = 计数；如果(计数 % 3 == 0){console.log("开始休息");返回真；}别的返回假；}});

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

在此处查看结果:http://testprojectapp.meteor.com

你会看到第一行显示正常，但在那之后我得到了一些时髦的结果.如果您通过查看页面源代码查看 DOM，您会发现与我的代码不匹配，这很奇怪.

如果这是一个令人困惑的问题，请告诉我.谢谢！

解决方案

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

Template.projectList.helpers({项目:函数(){all = Projects.find({}).fetch();块 = [];大小 = 3while (all.length > 3) {chunks.push({ row: all.slice(0, 3)});all = all.slice(3);}chunks.push({row: all});返回块；},breakTimeReset:函数(){Template.projectList.doCount = 0;},休息时间:函数(){计数 = Template.projectList.doCount + 1;控制台日志(计数)；Template.projectList.doCount = 计数；如果(计数 % 3 == 0)return "</div><!-- 为什么?--><div class='row'>"别的返回 ""}});<模板名称=项目列表">{{breakTimeReset}}{{#每个项目}}{{>项目行 }}{{/每个}}<模板名称='projectRow'>
{{#每一行 }}{{>项目项}}{{/每个}}
<模板名称=项目项目"><div class="span4"><h3><a href="{{projectPagePath this}}">{{title}} </a></h3><p>{{subtitle}} </p><p>{{描述}} </p><p><img src="{{image}}"/></p><p>{{openPositions}} </p>

对不起，我错过了很多次，近点！

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屋！