Question

我将需要使用liquid.js实现Liquid模板，并且我想知道为什么在迭代数据时我无法获得基本表格。项目启动时我可能无法渲染任何表格对象（还有其他帖子讨论使用带有液体的表格是否合适），但知道我为什么尝试失败会有所帮助。 Liquid tablerow对象尚未移植到liquid.js，因此使用它不是一个选项。

在this jsfiddle中，使用基本列表标签可以迭代数组，但与表标签类似的语法却没有。

无法渲染：

  <table>
      {% for pet in pets %}
          <tr>
              <td>{{ pet.name }}</td>
              <td>{{ pet.type }}</td>
              <td>{{ pet.age }}</td>
          </tr>
      {% endfor %}
  </table>

按预期渲染：

  {% for pet in pets %}
  <ul>
      <li>{{ pet.name }}</li>
      <li>{{ pet.type }}</li>
      <li>{{ pet.age }}</li>
  </ul>
  {% endfor %}

jsFiddle

Answer 1

可以使用CSS将液体输出到简单表格。我已经为一个简单的库存表做了这个。这个HTML和CSS代码应该让你朝着正确的方向前进。

<ul class="pet-in-pets>
<li>{% liquid code here %} <br> {% more liquid %}</li>
</ul>
.pet-in-pets ul {  margin:0 0 15px;  width: 100%;  display: table;  table-layout: fixed; }
.pet-in-pets ul li {  display: table-cell;  width: auto;  text-align: center; border: 1px solid #fff; }

通过遍历数组填充表格与液体模板（使用liquid.js）

1 个答案: