Question

我试图以编程方式在jade模板中显示/渲染对象，通过将一组对象传递给视图来实现。目标是显示每行最多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中，这称为block grid

Answer 2

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

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

如果不使用仍然适用于Jade缩进的mixin，我会采取略微不同的方法。我通过检查索引是否包含数组边界来避免索引问题。

以下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代替。

Jade Mixin - 使用对象操作

2 个答案: