Question

我使用mustache.js作为我的模板系统，我对无逻辑的经验不足模板所以我决定问你这个问题。

我有以下html结构，两行各有3列，如下所示：

<div class="content-wrapper">
  <div class="grid-row">
    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>

    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>

    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>
  </div>

  <div class="grid-row">
    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>

    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>

    <div class="column-third">
      <p><a href="#">Text</a></p>
    </div>
  </div>  
</div>

我目前在模板上的内容如下：

<div class="content-wrapper">
  <div class="grid-row">
    {{#contentListToRender}}
      <div class="column-third">
        <p><a href="{{url}}">{{title}}</a></p>
      </div>
    {{/contentListToRender}}
  </div>
</div>

但正如你已经猜到的那样，将用尽可能多的元素（列）填充行我有contentListToRender。

我想知道是否有一种方法可以做到并保持html结构，或者我应该开始考虑修改html结构并使用CSS来设置外观样式？

感谢您的帮助，大卫

编辑，然后是pawel评论。

我认为你提到要做这样的事情？

<div class="content-wrapper">
    {{#contentListToRender}}
      {{#rows}}
        <div class="grid-row">
          {{#columns}}
            <div class="column-third">
              <p><a href="{{url}}">{{title}}</a></p>
            </div>
          {{/columns}}
        </div>
      {{/rows}}
    {{/contentListToRender}}
</div>

以这种方式成为我的contentListToRender：

var contentListToRender = function() {
  return {rows: [ { columns: [column, column, column] }, {columns: [column, column, column]} ]}
}

这是否是一种可以接受的方式来实现这一目标？

Answer 1

以下是我为此建立的解决方案，以防有人和我在同一个地方。

<div class="content-wrapper">
    {{#contentListToRender}}
    {{#rows}}
        <div class="grid-row">
        {{#columns}}
            <div class="column-third">
            <p><a href="{{url}}">{{title}}</a></p>
            </div>
        {{/columns}}
        </div>
    {{/rows}}
    {{/contentListToRender}}
</div>

将元素拆分为行和列的功能

var contentListToRender = function(elements) {
var rows    = { rows: [] };
var columns = [];

for (var i = 0; i < elements.length; i++) {
    var base_path = elements[i].base_path;
    var title     = elements[i].title;

    var column = {base_path: base_path, title: title};

    if ((columns.length > 0) && (columns.length % 3 == 0)) {
    // when the columns array has reached 3 elements
    // then add those columns to the rows
    rows.rows.push({columns: columns});

    // Then clear the columns array
    // and push the current column to the columns array
    columns = [];
    columns.push(column);
    } else {
    columns.push(column);
    }
}

// push the last columns to the last row
rows.rows.push({columns: columns});

return rows;
}

如何使用mustache.js作为无逻辑模板系统创建具有三列的两行？

1 个答案: