JsRender在FOR中使用自定义变量 [英] custom variables in FOR with JsRender

问题描述

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

I'm migrating from jQuery templates to JsRender and I don't know how to fully translate an {{each}} into a {{for}}

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

With jQuery templates I could do something like this:

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

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

Where object.items is an array of values and I could define a custom index and item variables to show data (in this case i and val). But how do I do the same thing in JsRender?

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

我知道index和data可以显示类似jQuery模板的相同内容，但是如何定义自定义变量?那有可能吗?

I know index and data are there to show the same thing like jQuery templates, but how can I define custom variables? Is that even possible?

更新:这样做的原因是为我正在使用的变量提供一些上下文.让我用和示例(jQuery tmpl)进行解释

UPDATE: The reason for this is to provide some context for the variable that I'm working with. Let me explain with and example (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}}

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

Is this kind of syntax/logic possible with your engine?

推荐答案

您可以为数据项创建一个自定义变量(相当于jQuery模板版本中的val)，如下所示:

You can create a custom variable for the data item (equivalent to val in the jQuery templates version), as follows:

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

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

There is currently no feature for a custom named index variable. (One could imagine adding support using the syntax {{for object.items itemVar='~val' indexVar='~i'}} - but that is not currently implemented).

但是，如果您想为#index提供自定义变量的原因是为了使其可用于嵌套块作用域，则可以在嵌套标记上为#index定义一个自定义变量，如下所示:

But if your reason for wanting to provide a custom variable for #index is in order to make it available to nested block scopes, you can define a custom variable for #index on the nested tag, as follows:

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

现在考虑以下具体情况:

Now to take the specific case of:

{{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中执行此操作的一种方法:

Here is one way to do that in JsRender/JsViews:

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

如果要与JsViews一起使用数据链接，请改写上面的内容:

If you want to use data-linking, with JsViews, you would instead write the above:

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

Note that in the JsViews version, because I want the ~rowIndex to update dynamically through data-binding when preceding rows are removed, I use the syntax ^~rowIndex - which is an opt-in to data-binding. ~rowIndex would render correctly initially but would not update when rows are removed...

你可以看到

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

• here: http://jsfiddle.net/BorisMoore/e3ah577p/
• and a similar case for two-dimensional arrays: http://jsfiddle.net/BorisMoore/cGZZP/

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

And out of interest, see also here for grid views using custom tags:

• http://jsfiddle.net/BorisMoore/dg7x8mrc/
• http://jsfiddle.net/BorisMoore/uu7opr3z/

• http://jsfiddle.net/BorisMoore/dg7x8mrc/
• http://jsfiddle.net/BorisMoore/uu7opr3z/

其他说明:针对以下评论，为什么不继续使用{{for(索引，项目)对象}}语法?"

在JsRender中，您可以轻松地创建自定义标签，并且所有标签都具有相同的结构: http://www .jsviews.com/#tags {{myTag arg0 arg1 namedProp1 = xxx namedProp2 = yyy}} ... {{/myTag}} 使用命名参数(props)和未命名参数( args).

In JsRender you can create custom tags very easily, and all tags share a common structure: http://www.jsviews.com/#tags {{myTag arg0 arg1 namedProp1=xxx namedProp2=yyy}} ... {{/myTag}} using named parameters (props) and unnamed parameters (args).

因此 itemVar ='〜val'适用于任何标签，甚至是自定义标签(不仅是 {{for ...}} )，还使用了标准语法命名参数，并允许您创建与一个或多个模板块的数据项相对应的上下文模板参数(帮助程序参数) val .

So itemVar='~val' works for any tag even custom tags (not just {{for ...}} ), uses the standard syntax for a named parameter, and allows you to create a contextual template parameter (helper parameter) val corresponding to the data item of the template block (or blocks).

此外，在JsRender中，(表达式)语法已经具有arg的含义.例如， {{for(1 + 2)}} {{:}} {{/for}} 将输出 3 ！

Also in JsRender the (expression) syntax already has a meaning as an arg. For example, {{for (1 + 2)}}{{:}}{{/for}} will output 3!

在jQuery模板中，不支持自定义标签，并且 {{each}} 标记的语法特别是(i，val).

In jQuery Templates, there is no support for custom tags, and the (i, val) syntax is special-cased for the {{each}} tag.

在常见情况下，您不需要自定义变量名和jQuery Templates语法:

In the common-case scenario you don't need custom variable names and the jQuery Templates syntax:

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

(我想说)比JsRender稍微复杂一点:

is (I would say) slightly more complex than the JsRender one:

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

这篇关于JsRender在FOR中使用自定义变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！