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

当我点击任务时，我在控制台上收到此错误：＆＃34; undefined＆＃34;而且我不太了解背后的原因。我做了一些研究并找到了一个可能的解决方案：也许＆＃39; click .task＆＃39 ;: function（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值在上下文之外不可用

2 个答案: