在jsrender模板中使用for循环

Question

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

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

这将返回以下值：

[object Object],[object Object]

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

- Raja

---

你能提供一个简化版本的代码（例如 jsFiddle），以便我们可以更好地了解正在发生的事情吗？ - Tim A

Answer 1

你可以使用{{for}}来遍历一个数组。例如这样：

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

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

- Dave Ward

Answer 2

我提供了一个示例来演示jsrender循环和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}}   

- Mohnish Karhade

---

如果您能多解释一下您所做的事情，那将更易于理解。 - Kami Kaze

Answer 3

要迭代数组，请参见http://www.jsviews.com/#fortag。(在页面较低处显示了用于循环访问数组的标记的使用)。

此外，对于您的模板示例有一些评论:

看起来你正在使用一个生成的模板，插入 columnName 参数的值。因此，如果 columnName 的值为 "fooColumn"，则您的模板片段为 {{:#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>"

- BorisMoore