javascript - Jade Mixin - 对象操作

Question

我正在尝试以编程方式在 jade 模板中显示/渲染对象，这是通过将对象数组传递给 View 来实现的。目标是显示一个 GridView ，每行最多包含 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 

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

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

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

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

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

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

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

就这么简单。现在您只需为该列表设置样式。在 Foundation这叫做block grid