Jade Mixin – 用对象操纵
我试图以编程方式显示/呈现玉模板中的对象，通过传递一个对象数组到视图。 目标是显示每行最多3个项目/对象的网格视图。 我遇到了embedded式元素自行closures内联代码块的问题。
为了实现我的目标，我开始尝试使用Mixins。
mixin testCase_Columns(obj) - for (var i = 0; i < obj.length; i++) if (i%3==0) div.row +renderObj(i, obj) 上面的逻辑确定我的数组中的当前对象编号是否可以被3整除。这就是我打算控制每行渲染3个项目/对象的方式。 从这里我传递对象和计数器variables到第二个混合：
mixin renderObj(i, obj) - for(var xx = 0; xx <3 ; xx++) div.col-lg-4 p='Object:' + obj[i].proj **- i++**
上面，我渲染三列，并将1添加到我的计数器'我'，在这种情况下'我'用于陈述我的对象数组键。
我遇到的问题是当我包含i ++增量语句玉返回错误：
type error: Cannot read property 'proj' of undefined
不过，我已经进行了各种testing，包括通过手动键入访问和打印每个对象：
obj[1].proj / obj[2].proj / obj[3].proj for example.
当我试图增加一个增量声明时，它在我的脸上炸开了。
我仍然在学习节点/玉石等。也许我的编码是不正确的。 我知道上面的代码语句缺乏基本的逻辑来正确渲染最终的行，其中包含less于三个对象，但目前我只是testing。
任何帮助将非常感激。
提前致谢。
你也许应该远离那种“排”的想法。 纠正我，如果我错了，但你有什么显然是一个“清单”的对象。 那么，为什么你不使用一个列表标记，而是不必要地在一个较小的部分砍掉一个对象的集合呢？
<ul> <li> Object 1 </li> <li> Object 2 </li> <li> Object 3 </li> <li> Object [...] </li> <li> Object 20 </li> </ul>
就这么简单。 现在你只需要devise这个列表。 在基金会这被称为块网格
你遇到的问题是你最终试图访问超出其边界的数组。 因此，你不小心尝试访问一个不存在的对象的属性，这是一个JavaScript错误。
你的代码有点复杂。 但是发生的事情是这样的。 考虑长度为5的数组。然后renderObj mixin将被运行两次。 它第一次从索引0开始，并增加到2.第二次调用i == 3因为这也满足您的i % 3 == 0如果语句。 但它然后增加i到5，并尝试访问obj[5].proj 。 但obj长度为5，因此没有超出4的索引的内容。 因此你得到错误。
我会采取一些稍微不同的方法，而不使用仍然适用于Jade缩进的混合。 我通过检查索引是否在数组边界来避免索引问题。
以下Jade模板
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标签的以下内容：
表格元素以表格的forms表示具有多个维度的数据。
如果你的数据是一维的，顺序无关紧要，你应该使用ul来代替。