jsrender 模板中的 for 循环答案

【问题标题】：for loop with in the jsrender templatejsrender 模板中的 for 循环
【发布时间】：2014-01-09 05:14:25
【问题描述】：

在我的工作场景中，我在 js 渲染模板中使用以下代码 sn-p：

{{:#data['" + columnName + "']}}

这将返回值：

[object Object],[object Object]

如何在 js 渲染模板中使用 for 循环从这个数组对象 [object Object],[object Object] 获取特定属性？

【问题讨论】：

您能否提供您的代码的简化版本（可能是 jsFiddle），我们可以用它来了解更多正在发生的事情？

标签： javascript jquery html jsrender

【解决方案1】：

您可以使用{{for}} 来遍历数组。像这样的：

<ul>
{{for columnName}}
  <li>{{:Property}}</li>
{{/for}}
</ul>

在循环内部，您的基本作用域会自动成为数组中的特定对象，因此您可以使用{{:Property}} 直接输出该对象的任何属性。

【讨论】：

【解决方案2】：

我已经给出了例子来演示 jsrender for loop 和 props 是如何工作的。 StudentList 具有学生详细信息数组并在学生列表上迭代循环你只需要使用{{for StudentList}}{{/for}}。

现在每个学生都有三个属性，所以遍历属性可以使用{{props}}{{/props}}标签和渲染数据使用{{>key}}和{{>prop}}

文档：https://www.jsviews.com/#propstag

JSON 数据：

<!-- language: lang-json -->

"StudentList": [
        {
            "RollNo": 1,
            "Name": "John Doe",
            "Subject": "Maths"            
        },
        {
            "RollNo": 2,
            "Name": "Jane Doe",
            "Subject": "Physics"            
        },
        ...

渲染模板：

<!-- language: lang-html -->

{{for StudentList}}
    <tr>
        {{props #data}}
            <td>{{>key}}</td><td>{{>prop}}</td>
        {{/props}}
    </tr>
{{/for}}

【讨论】：

如果你能多解释一下你做了什么会更好，这样更容易理解。

【解决方案3】：

要遍历数组，请参阅http://www.jsviews.com/#fortag。（页面下方显示使用标签循环遍历数组）。

另外，关于您的模板示例的一些 cmets：

看起来您正在使用生成的模板，其中插入了 columnName 参数的值。因此，如果columnName 的值为"fooColumn"，则您的模板sn-p 为{{:#data['fooColumn']}} - 实际上相当于{{:#data.fooColumn}}，可以进一步简化为{{:fooColumn}}。

（我假设 columnName 的值是一个有效的 JavaScript 名称 - 而不是像 "foo column" 这样的值，比如带有空格 - 在这种情况下，您的语法确实是合适的。）

现在，如果 #data.fooColumn 是一个对象数组，每个对象都有一个 'itemProperty' 属性，那么使用 {{for}} 迭代数组看起来像这样（David Ward 的示例略有变化）：

<ul>
  {{for fooColumn}}
    <li>{{:itemProperty}}</li>
  {{/for}}
</ul>

使用 columnName 生成的形式是

"<ul>{{for " + columnName + "}}<li>{{:itemProperty}}</li>{{/for}}</ul>"

【讨论】：