使用 JsRender 在 FOR 中自定义变量

Question

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

使用 jQuery 模板我可以做这样的事情：

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

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

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

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

UPDATE：这样做的原因是为我正在使用的变量提供一些上下文。让我用例子来解释 (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}}

这种 syntax/logic 可以用在你的引擎上吗？

Answer 1

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

{{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 最初会正确呈现，但在删除行时不会更新...

可以看到

此处：http://jsfiddle.net/BorisMoore/e3ah577p/
和二维数组的类似情况：http://jsfiddle.net/BorisMoore/cGZZP/

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

补充说明：回应下面的评论"why not continue with the {{for (index, item) object}} syntax?"

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

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

同样在 JsRender 中，(expression) 语法已经具有作为参数的含义。例如，{{for (1 + 2)}}{{:}}{{/for}} 将输出 3!

在 jQuery 模板中，不支持自定义标签，(i, val) 语法是 的特例{{每个}} 标签。

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

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

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

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

使用 JsRender 在 FOR 中自定义变量

custom variables in FOR with JsRender

jquery

jquery-templates

jsrender

jsviews