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?

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

模板：

 <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);
}

在＆＃34;点击.clickme＆＃34;事件处理程序，获取会话变量：

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.
    }
})

P.S。 B的索引是一个字符串，使用pareseInt（parentelement）来解析为整数。

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

1 个答案: