?? Handlebars 'each' ?????????

Posted 2023-03-10

【中文标题】使用 Handlebars \'each\' 循环访问父级的属性

【英文标题】：Access properties of the parent with a Handlebars 'each' loop使用 Handlebars 'each' 循环访问父级的属性

【发布时间】：2012-08-31 03:33:19

【问题描述】：

考虑以下简化数据：

var viewData = 
    itemSize: 20,
    items: [
        'Zimbabwe', 'dog', 'falafel'
    ]
;

还有一个 Handlebars 模板：

#each items
    <div style="font-size:itemSizepx">this</div>
/each

这行不通，因为在each 循环中，父范围不可访问——至少我尝试过的任何方式都无法访问。我希望有办法做到这一点！

【参考方案1】：

有两种有效的方法可以实现这一点。

用../取消引用父作用域

通过在属性名称前加上../，您可以引用父作用域。

#each items
    <div style="font-size:../itemSizepx">this</div>
    #if this.items.someKey
       <div style="font-size:../../itemSizepx">this</div>  
    /if
/each

您可以通过重复../ 来提升多个级别。例如，要上两层，请使用../../key。

有关详细信息，请参阅Handlebars documentation on paths。

用@root取消对根范围的引用

通过在属性路径前添加@root，您可以从最顶层范围向下导航（如caballerog's answer 所示）。

有关详细信息，请参阅Handlebars documentation on @data variables。

【讨论】：

只是关于使用 ../ 获取父属性的说明。如果您有一个带有嵌套#if 的每个语句，那么只需执行../ 只会让您达到#each 的级别。所以你必须做 ../../itemSize 才能回到#each

之外的父级

如何在 mustache.js 模板引擎中获得此功能？

@blushrt 你不知道。那是特定于车把的

@TheTaxPayer 你刚刚让我头疼不已！穿上袜子继续摇滚吧:)

如何将上层#each 值传递给帮助程序

【参考方案2】：

新方法使用点表示法，斜线表示法已弃用 (http://handlebarsjs.com/expressions.html)。

因此，访问父元素的实际方法如下：

@root.grandfather.father.element
@root.father.element

在您的具体示例中，您将使用：

#each items
 <div style="font-size:@root.viewData.itemSizepx">this</div>
/each

官方文档中的另一种方法（http://handlebarsjs.com/builtin_helpers.html）是使用别名

each 助手还支持块参数，允许命名 引用块中的任何位置。

#each array as |value key|  
 #each child as |childValue childKey|
     key - childKey. childValue   
 /each 
/each 

将创建一个孩子可以在没有的情况下访问的键和值变量 需要深入的变量引用。在上面的示例中，key > 与 @../key 相同，但在许多情况下更具可读性。

【讨论】：

使用“@root.itemSize”为我上一层楼。

从技术上讲，这不会上升一级 - 它会从根目录下降一级，并且只有在你下降一级时才有效。如果您不知道当前的嵌套级别，则此方法不起作用。

【参考方案3】：

不幸的是 ../ 取消引用似乎无法通过部分进行。但是我们可以将属性添加到传递到部分的上下文中：

Name: parent.name

#each children
    > childpartial this parent=../parent
/each

子部分：

name is child of parent.name

更多： handlebars - is it possible to access parent context in a partial?

【参考方案4】：

我们可以使用 ../parent.propertyname

访问父级