Question

还在学习把手，所以不确定这个问题是否清楚。我有一系列人物。我的模板适用于将每个人的图像放在相同结构的容器中的div，直到它迭代到特定的人。

顶行呈现为预期的相等大小的图像，总共四个，在它包装到第二个之前，使用不同的网格我无法弄清楚如何模板，然后继续到第三行继续回到我的模板很好用的四个图像行。这个巨大的网格底部附近有不同的大小，对于我需要弄清楚的对象阵列中的特定人来说也是如此。

从教程中，我认为部分会有所帮助，但不确定如何阻止{{#each}}为每个上下文应用部分。我该怎么做，或者我需要什么助手/功能才能实现这一目标？

示例代码：

HTML expected

<div class="person-image-grid">
  ..stuff
</div> (x4)
<div class="different-grid">
   <div class="person-image-grid">
     ..stuff
   </div>
   <div class="half-width video">
     A bigger div, about half the width of the page, with video of person
   </div>
   <div class="person-image-grid">
     ..stuff
   </div>
</div>
<div class="person-image-grid">
  ..stuff
</div> (x4)

我的模板

{{#each person}}
  <div class="person-image-grid">
      <div class="person-image-grid_picture">
          <img class="person-image-grid_image" src="personImages/{{firstName}}_{{lastName}}/{{firstName}}{{lastName}}.jpg">
      </div>
      <p class="person-image-grid_name">{{firstName}} {{lastName}}</p>
  </div>
{{/each}}

JS

function _templateGridModal() {
  var templateGridScript = document.getElementById("student-image-grid-template").innerHTML,
  parentGrid = document.getElementsByClassName("student-image-grid")[0];

  var theTemplateGrid = Handlebars.compile(templateGridScript);

  var obj = { 
   people: [
     {"firstName": "Joe", "about": "stuff", "quote": "a quote here"},
     {"firstName": "John", "about": "stuff" //etc},
     {"firstName": "Mary", "about": "stuff" //etc},
     {"firstName": "Tom", "about": "stuff" //etc}
    //and so on
   ] 
  };

  var theCompiledTemplateGrid = theTemplateGrid(obj);
  parentGrid.innerHTML = theCompiledTemplateGrid;
}

Answer 1

我会避免尝试将所有复杂的条件和计数器放入模板中。 Handlebars背后的理念是逻辑不应该在视图层中，所以我认为你会发现自己编写了很多自定义帮助程序代码，以便以这种方式工作。相反，我建议在到达模板之前将people列表分块。你可以有一个交替排列＆＃34;行＆＃34;保存每行数据的对象 - 无论是单个项目行还是要在该行中呈现的列（人员）。 rows数组如下所示。

var rows = [ { is_single: false, people: [] //Array[4] }, { is_single: true, people: [] //Array[1] } ];

此时最具挑战性的部分是弄清楚从rows数组动态构建people数组所需的数学运算。我创建了一个实现，可能是也可能不是最好的方法：

// 2 rows for every 5 people + 1 row for any remainders var num_rows = Math.floor(people.length / 5) * 2 + (people.length % 5 ? 1 : 0); var rows = []; for (var i = 0; i < num_rows; i += 1) { var is_single = Boolean(i % 2); var start_index = is_single ? (Math.floor(i/2) + 4 * (Math.floor(i/2) + 1)) : (2 * i + Math.floor(i/2)); var end_index = is_single ? start_index + 1 : start_index + 4; rows.push({ is_single: is_single, people: people.slice(start_index, end_index) }); }

我们要做的就是重新编写我们的模板以迭代我们的rows对象，并根据每行中的is_single标记呈现适用的标记：

{{#each rows}} {{#if is_single}} <div class="different-grid"> {{#with (lookup people 0)}} <div class="person-image-grid"> {{firstName}} </div> {{/with}} <div class="half-width video"> A bigger div, about half the width of the page, with video of person </div> <div class="person-image-grid"> ..stuff </div> </div> {{else}} {{#each people}} <div class="person-image-grid"> {{firstName}} </div> {{/each}} {{/if}} {{/each}}

我创建了一个示例fiddle供参考。

如何在我的Handlebars模板中包含div结构/样式的独特更改？

1 个答案: