javascript - Handlebars - 将变量传递到点符号中

Question

我正在尝试重用一个名为 rater-table.hbs 的部分，它看起来像这样

 <div class="comparison-rater-container">
  {{> rater-table header="Key Stakeholder" valueType=KeyStakeholder}}
  {{> rater-table header="Group 1" valueType=Group1}}
  {{> rater-table header="Group 2" valueType=Group2}}
  {{> rater-table header="Other Stakeholders" valueType=OtherStakeholders}}
</div>

在我的其他文件中，我可以很好地调用 header 变量，但我无法让 valueType 适合括号表示法。我正在尝试像这样使用它

{{ ../pole.summary.benefits.[(valueType)] }}

如果我对单词 Group1 进行硬编码，它可以正常工作，但否则它会给我一个空值。有什么方法可以让它在 Handlebars 上工作吗？

Answer 1

在 Handlebars 中查找对象动态属性的方法是使用 lookup helper 。这看起来像:

{{lookup ../pole.summary.benefits valueType }}

但是，查找需要一个字符串值，该值将作为第一个参数的对象的属性进行查找。因此，您需要确保为分配给 valueType 的每个值加上引号。如果没有引号，Handlebars 将尝试将每个属性评估为当前上下文对象的属性，并且它们最终都会将 valueType=undefined 传递给部分。

模板必须变成:

<div class="comparison-rater-container">
    {{> rater-table header="Key Stakeholder" valueType="KeyStakeholder"}}
    {{> rater-table header="Group 1" valueType="Group1"}}
    {{> rater-table header="Group 2" valueType="Group2"}}
    {{> rater-table header="Other Stakeholders" valueType="OtherStakeholders"}}
</div>

或者，您可以放弃查找并将每个值直接传递给部分:

{{> rater-table header="Key Stakeholder" value=../pole.summary.benefits.KeyStakeholder }}

我创建了一个fiddle供引用。