0

我正在从 jQuery 模板迁移到 JsRender，但我不知道如何{{each}}将{{for}}

使用 jQuery 模板，我可以执行以下操作：

{{each (i, val) object.items}}
    <span data-index="${i}">${val}</span>
{{/each}}

Whereobject.items是一个值数组，我可以定义一个自定义index和item变量来显示数据（在本例中为i和val）。但是我如何在 JsRender 中做同样的事情呢？

{{for object.items}}
    <span data-index="{{:#index}}">{{:#data}}</span>
{{/for}}

我知道index并且data可以显示与 jQuery 模板相同的内容，但是如何定义自定义变量？这甚至可能吗？

更新：这样做的原因是为我正在使用的变量提供一些上下文。让我用例子来解释（jQuery tmpl）

{{each (r, row) object.rows}}
    {{each (c, col) object.cols}}
        //work with both index and item knowing which one is which
    {{/each}}
{{/each}}

您的引擎可以使用这种语法/逻辑吗？

4

1 回答 1

0

您可以为数据项创建自定义变量（相当于val在 jQuery 模板版本中），如下所示：

{{for object.items itemVar='~val'}}
    <span>{{:~val}}</span>
{{/for}}

当前没有自定义命名index变量的功能。（可以想象使用语法添加支持{{for object.items itemVar='~val' indexVar='~i'}}- 但目前尚未实现）。

但是，如果您想要为 #index 提供自定义变量的原因是为了使其可用于嵌套块范围，您可以#index在嵌套标记上定义自定义变量，如下所示：

{{for object.items itemVar='~val'}}
    {{someNestedTag ~i=#index}}
        <span data-index="{{:~i}}">{{:~val}}</span>
    {{/someNestedTag}}
{{/for}}

现在以具体案例为例：

{{each (r, row) object.rows}}
    {{each (c, col) object.cols}}
        //work with both index and item knowing which one is which
    {{/each}}
{{/each}}

这是在 JsRender/JsViews 中执行此操作的一种方法：

{{for grid.rows ~grid=grid}}
  {{for ~grid.cols ~rowIndex=#index ~row=#data}}
    Row {{:~rowIndex}} {{:~row.rowProp}}
    Col: {{:#index}} {{:colProp}}
  {{/for}}
{{/for}}

如果你想通过 JsViews 使用数据链接，你可以写上面的代码：

{^{for grid.rows ~grid=grid}}
  {^{for ~grid.cols ^~rowIndex=#index ~row=#data}}
    Row {^{:~rowIndex}} {^{:~row.rowProp}}
    Col: {^{:#index}} {^{:colProp}}
  {{/for}}
{{/for}}

请注意，在 JsViews 版本中，因为我希望 ~rowIndex 在删除前面的行时通过数据绑定动态更新，所以我使用语法^~rowIndex- 这是对数据绑定的选择。~rowIndex最初会正确呈现，但在删除行时不会更新...

你可以看到

出于兴趣，另请参阅此处了解使用自定义标签的网格视图：

附加说明：针对下面的评论“为什么不继续使用 {{for (index, item) object}} 语法？”

在 JsRender 中，您可以非常轻松地创建自定义标签，所有标签共享一个共同的结构： http: //www.jsviews.com/#tags {{myTag arg0 arg1 namedProp1=xxx namedProp2=yyy}} ... {{/myTag }}使用命名参数（props）和未命名参数（args）。

所以itemVar='~val'适用于任何标签，甚至自定义标签（不仅仅是{{for ...}}），使用命名参数的标准语法，并允许您创建上下文模板参数（帮助参数）val对应于模板块（或块）的数据项。

同样在 JsRender 中，（表达式）语法已经具有作为 arg 的含义。例如，{{for (1 + 2)}}{{:}}{{/for}}将输出3！

在 jQuery 模板中，不支持自定义标签，并且(i, val)语法对于{{each}}标签是特殊的。

在常见情况下，您不需要自定义变量名称和 jQuery 模板语法：

{{each (i, val) object.items}}
    <span data-index="${i}">${val}</span>
{{/each}}

（我会说）比 JsRender 稍微复杂一点：

{{for object.items}}
    <span data-index="{{:#index}}">{{:}}</span>
{{/for}}
于 2015-07-11T21:33:19.227 回答