使用把手访问嵌套数组渲染中的父数据

Question

我有以下数据结构：

A : 
{
  "B": [
    {
      "C":["Hello", "World"]
    }
  ]

}

A 有一个属性 B，它是一个数组。 B 的每个元素都有一个属性 C，它又是一个数组。

<template name="render">
{{#each B}}
{{#each C}}
<div class="clickme">{{this}}</div>
{{/each}}
{{/each}}
</template>

所以现在我有了一个事件处理程序，我想在其中访问 B 的元素，其中呈现了“this”（== C 的元素）。但是这似乎是不可能的。我该怎么做？

Template.render.events({
    "click .clickme" : function (event, template) {
         //template.data == A
         //Template.parentData(0) == A
         //Template.parentData(1) == A
         console.log("what was my parent B?");
    }
})

Answer 1

您可以使用../ 向上移动多个级别 在您的情况下，假设您想要父元素的索引，然后：
{{@../index}}
要访问父元素的另一个键（不适用于您的情况）：
{{../key}}
参考：
Access properties of the parent with a Handlebars 'each' loop
Handlebars.js: How to access parent index in nested each?

编辑：要从“click .clickme”事件处理程序访问父元素，我不知道从事件处理程序访问的直接方法，但一种可能的方法是在 html 中创建一个 onclick 事件，并调用一个函数，您可以将父元素（或其索引）作为参数传递给它。在函数中，set 是一个会话变量，然后可以在“click.clickme”事件处理程序中引用。

模板：

 <template name="render">
    {{#each B}}
    {{#each C}}
    <div class="clickme" onclick="onclickfunction('{{@../index}}')">{{this}}</div>
    {{/each}}
    {{/each}}
    </template>

在客户端javascript中，定义一个函数：

onclickfunction = function(parentindex) {
Session.set('indexofparent',parentindex);
}

在“click .clickme”事件处理程序中，获取会话变量：

Template.render.events({
    "click .clickme" : function (event, template) {
         //template.data == A
         //Template.parentData(0) == A
         //Template.parentData(1) == A
         var parentelement = Session.get('indexofparent');
         console.log(parentelement);//Shows index of B.
    }
})

附： B的索引是一个字符串，使用pareseInt(parentelement)解析成整数。