javascript - Handlebars 动态访问变量

Question

假设我有一个包含两个项目的对象:

状态:{
'action-foo-collapsed':1，
'操作栏折叠':1
}

在 Handlebars 中，我正在迭代另一个对象，其中的键与 foo 和 bar 相对应。

我想以动态方式访问如上所示的对象，如下所示:

{{#if @root.state['action-' @key '-collapsed']}}

在不使用自定义助手的情况下，这是否可以实现？

Answer 1

您可以使用Lookup用于动态参数解析的内置助手。但是，您的情况有点复杂，因为您想要连接一些字符串来创建 state 键。如果您的 state 对象具有与其他对象相同的键，那就更容易了。这将允许您执行以下操作:

{{#if (lookup @root.state @key)}}

{{/if}}

请注意，上面使用了 Handlebars 的子表达式，它允许我们将 lookup 帮助器的结果传递给 if 帮助器。

不幸的是，Handlebars 没有用于连接字符串的内置助手。如果您的 state 对象的键必须与您的问题中的键相同，那么您将需要创建一个允许您连接的帮助器。这样的助手相当简单，这是我想出的一个:

Handlebars.registerHelper('concat', function () {
    return Array.prototype.slice.call(arguments, 0, -1).join('');
});

使用此帮助程序，我们可以访问您的 state 对象的键，如下所示:

{{#if (lookup @root.state (concat 'action-' @key '-collapsed'))}}

{{/if}}

作为引用，我创建了一个示例 fiddle使用上述两种方法来解决这个问题。