有没有办法在我的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/ - 它保留了胡子语法,但添加了一些好东西,比如访问父上下文(通过../).例如:

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