javascript - 有什么办法可以避免 Mustache.js 模板中嵌套结构中的名称冲突？

Question

我的 Mustache 模板中的名称冲突确实存在问题（使用 Mustache.js）。这个例子说明了这两个问题：

我正在传递这些数据：

{'recs': {'code': 'foo', 'id': 1
          'childRecs': [{'id': 2},
                        {'code': 'bar', 'id': 3}]
         }
}

进入这个模板：

{{#recs}}
  Record ID: {{id}}
  {{#childRecs}}
    This child code is: [{{code}}] and its parent ID is: {{id}}
  {{/childRecs}}
{{/recs}}

预期的：

Record ID: 1
This child code is: [] and its parent ID is 1
This child code is: [bar] and its parent ID is 1

实际的：

Record ID: 1
This child code is [foo] and its parent ID is 2
This child code is [bar] and its parent ID is 3

1. 嵌套{{#childRecs}}块中无法访问父{{#recs}}{id}}{{/recs}}字段——它被{{#childRecs}}{{id}}{{/childRecs}}

2. 如果{{#childRecs}}缺少 in 的变量，并且存在同名的父变量，则无法阻止它打印父变量。

我的嵌套结构非常深，并且有很多名称冲突，因此以不冲突的方式重命名它们不是一个可行的选择。有没有其他方法可以解决我的问题？

Answer 1

我看到两个选项：

• 在发送数据进行渲染之前，在客户端丰富数据。例如，您可以遍历所有 childRecs 并添加一个新的 parentId 属性 - 然后相应地更新您的模板，或者

• 使用http://www.handlebarsjs.com/ - 它保留了 mustache 语法，但添加了一些好处，例如访问父上下文（通过../）。例如：

  {{#recs}}
      Record ID: {{id}}
      {{#childRecs}}
          This child code is: [{{code}}] and its parent ID is: {{../id}}
      {{/childRecs}}
  {{/recs}}