2

我正在尝试以编程方式在玉模板中显示/渲染对象，通过将对象数组传递给视图来实现。目标是显示一个网格视图，每行最多包含 3 个项目/对象。我遇到了嵌套元素在行内代码块中自动关闭的问题。

我已经开始尝试使用 Mixins 来实现我的目标：

mixin testCase_Columns(obj)
- for (var i = 0; i < obj.length; i++)
   if (i%3==0)
     div.row
        +renderObj(i, obj)

上述逻辑确定我的数组中的当前对象编号是否可被 3 整除。这就是我打算如何控制每行渲染 3 个项目/对象的方式。从这里我将对象和计数器变量传递给第二个mixin：

mixin renderObj(i, obj)
  - for(var xx = 0; xx <3 ; xx++)
      div.col-lg-4
        p='Object:' + obj[i].proj
        **- i++**

上面，我渲染了三列并将 1 添加到我的计数器“i”中，在这种情况下，“i”用于声明我的对象数组键。

我遇到的问题是当我包含 i++ 增量语句时，jade 返回错误：

type error: Cannot read property 'proj' of undefined

但是我已经执行了各种测试，包括通过手动声明键来访问和打印每个对象：

obj[1].proj / obj[2].proj / obj[3].proj for example.

当我尝试添加一个增量语句时，它在我面前爆炸了。

我还在学习节点/玉等。也许我的编码不正确。我知道上面的代码语句缺乏正确呈现包含少于三个对象的最后一行的基本逻辑，但目前我只是在测试。

任何帮助将非常感激。

提前致谢。

4

2 回答 2

0

你也许应该摆脱那种“排”的想法。如果我错了，请纠正我，但你所拥有的显然是一个对象“列表”。那么，为什么不直接使用列表标记，而不是不必要地将对象集合分割成更小的部分呢？

<ul>
    <li> Object 1 </li>
    <li> Object 2 </li>
    <li> Object 3 </li>
    <li> Object [...] </li>
    <li> Object 20 </li>
</ul>

就这么简单。现在您只需要设置该列表的样式即可。在Foundation中，这称为块网格

于 2013-09-23T10:15:48.580 回答
0

您遇到的问题是您最终尝试访问其边界之外的数组。因此，您不小心尝试访问不存在的对象的属性，这在 JavaScript 中是错误的。

你的代码有点复杂。但正在发生的事情是这样的。考虑一个长度为 5 的数组。然后您的renderObjmixin 将运行两次。第一次它从索引 0 开始并增加到 2。第二次调用i == 3它也满足您的i % 3 == 0if 语句。但它随后i增加到 5 并尝试访问obj[5].proj. 但obj长度为 5，因此没有超出索引的内容4。因此你得到错误。

在不使用仍然适用于 Jade 缩进的 mixin 的情况下，我会采取稍微不同的方法。我通过检查索引是否在数组边界内来避免索引问题。

以下翡翠模板

table
  - for (var i = 0; i < Math.ceil(obj.length / 3); i++)
    tr
      - for (var j = 0; j < 3; j++)
        if (i * 3 + j < obj.length)
          td= obj[i * 3 + j]

生成此 HTML

<table>
  <tr>
    <td>Yo</td>
    <td>what</td>
    <td>is</td>
  </tr>
  <tr>
    <td>up</td>
    <td>end</td>
  </tr>
</table>

使用以下命令行选项运行时：jade test.jade -O "{ obj: ['Yo', 'what', 'is', 'up', 'end'] }".

上面的工作如你所愿，但正如 mchlslzmnn 提到的，你应该考虑你的数据是否实际上是应该以表格形式标记的东西。W3C 规范声明了关于table标签的以下内容：

表格元素以表格的形式表示具有多个维度的数据。

如果您的数据是一维的并且顺序无关紧要，您应该使用它ul。

于 2013-09-23T10:35:18.497 回答