Jade Mixin-具有对象操纵

Question

我正在尝试以编程方式显示/渲染玉器模板中的对象，方法是将对象数组传递给视图。 目标是显示每行最多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. 

当我尝试添加一个增量语句时，它在我的脸上炸毁。

我仍在学习节点/翡翠等。也许我的编码不正确。 我知道上面的代码语句缺乏基本逻辑来正确呈现最后一个包含少于三个对象的行，但此刻我仅在测试。

任何帮助将非常感激。

提前致谢。

Answer 1

您也许应该摆脱这种“行”式思维。 如果我错了，请纠正我，但您显然拥有的是对象的“列表”。 那么，为什么不使用列表标记而不是不必要地将对象集合切成较小的部分呢？

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

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

Answer 2

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

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

如果不使用仍可与Jade的缩进配合使用的mixins，我会采用略有不同的方法。 我通过检查索引是否超出数组边界来避免索引问题。

以下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标签规定了以下内容：

table元素以表的形式表示一个以上维度的数据。

如果您的数据是一维且顺序无关紧要，则应改用ul 。