嵌套的#Each 值在上下文之外不可用

Question

我有一个嵌套的每一对，如下所示： {{#目标中的每个目标}}

<template name="task">
{{#each goal in goals}}
 {{#each task in relatedTasks goal}}
<li>
<span class="text task"><a href="#modal-taskedit" data-toggle="modal"><strong>{{task.taskName}}</strong></a> to {{goal.goalName}}<br> taskid: {{task._id}}
{{task.taskPostpone}}</span>
    {{#afModal class="btn btn-primary" collection="Tasks" operation="update" doc=task._id}}
  Update {{task.taskName}}
{{/afModal}}
</li> 
      {{/each}}
 {{/each}}    

</template>

并想在我的 client.js 中获取 task._id 的值，如下所示：

Template.task.events({
    'click .task': function() {
    Session.set("selectedTask", this._id);
        //console.log(this._id);
        //console.log(goal._id);
        console.log(task._id);
        //console.log('Click event happened: this._id saved as selectedItem Session variable.');
  } 
  });

当我单击任务时，我在控制台上收到此错误："undefined" 我不太明白背后的原因。我做了一些研究并找到了一个可能的解决方案：也许 'click .task'：函数（任务）应该接收任务上下文或输入，以便能够掌握 this._id 的含义。我有一个 {{#afModal doc=task._id}} 它也应该接收 task._id 的值并且似乎不起作用，尽管我认为它被放置在正确的上下文中。我有一种感觉，这两个问题在某种程度上是相关的。

Answer 1

问题在于 {{#each goal in goals}} 循环语法不会更改循环内的数据上下文 (see docs)。它只是添加一个 goal 变量以供您的空格键模板使用。

一个解决方案是像这样将 {{#each task in ...}} 循环的内容移动到另一个模板。

<template name="task">
    {{#each goal in goals}}
        {{#each task in relatedTasks goal}}
            {{> goalTask goal=goal task=task}}
        {{/each}}
    {{/each}}
</template>

<template name="goalTask">
    <li>
        <span class="text task">
            <a href="#modal-taskedit" data-toggle="modal"><strong>{{task.taskName}}</strong></a>
            to {{goal.goalName}}<br>
            taskid: {{task._id}} {{task.taskPostpone}}
        </span>
        {{#afModal class="btn btn-primary" collection="Tasks" operation="update" doc=task._id}}
            Update {{task.taskName}}
        {{/afModal}}
    </li>
</template>

您的事件处理程序将如下所示。

Template.goalTask.events({
    'click .task': function() {
        console.log(this.goal._id);
        console.log(this.task._id);
    } 
});

Answer 2

这是嵌套对象中事件的常见问题，如何获取被点击对象的数据上下文？

解决此问题的最简单方法是为每一层嵌套创建一个模板。然后自动提供适当的上下文。

<template name="goals">
{{#each goals}}
  {{#each task}}
    {{> task}}
  {{/each}}
{{/each}}
</template>

<template name="task">
<li>
  <span class="text task"><a href="#modal-taskedit" data-toggle="modal">
  <strong>{{task.taskName}}</strong></a> to {{goal.goalName}}<br>
  taskid: {{task._id}}{{task.taskPostpone}}</span>
  {{#afModal class="btn btn-primary" collection="Tasks" operation="update" doc=_id}}
    Update {{task.taskName}}
  {{/afModal}}
</li>
</template>

然后您的事件处理程序可以在内部任务模板上定义，数据上下文自动成为单独的任务，而不是外部模板的数据上下文。

Template.task.events({
  'click .task': function(){
    Session.set("selectedTask", this._id);
  } 
});

嵌套的#Each 值在上下文之外不可用

Nested #Each values are not available outside of the context

meteor

meteor-blaze

meteor-helper