Handlebars动态访问变量

Question

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

state : { 'action-foo-collapsed' : 1, 'action-bar-collapsed': 1 }

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

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

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

这是否可以实现，最好不使用自定义助手？

Answer 1

您可以使用Lookup内置帮助程序进行动态参数解析。但是，您的情况稍微复杂一些，因为您想要连接一些字符串来创建state密钥。如果您的state对象与其他对象具有相同的键，则会更容易。这将允许您执行以下操作：

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

{{/if}}

请注意，上面使用了Handlebars的Subexpressions，它允许我们将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，它使用上述两种方法来解决此问题。