Вложенные значения #Each недоступны вне контекста

Каждая пара у меня вложена следующим образом: {{#каждая цель в целях}}

<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>

и хотел бы получить значение task._id в моем client.js, как здесь:

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», и я действительно не понимаю причину. Я провел некоторое исследование и нашел возможное решение: возможно, «щелкните .task»: функция (задача) должна получить контекст задачи или входные данные, чтобы она могла понять значение this._id. У меня есть {{#afModal doc=task._id}}, который также должен получать значение task._id и, похоже, не работает, хотя я думаю, что он помещен в правильный контекст. У меня такое ощущение, что эти две проблемы каким-то образом связаны.


meteor meteor-blaze meteor-helper
person Peter    schedule 10.02.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Проблема в том, что синтаксис цикла {{#each goal in goals}} не меняет контекст данных внутри цикла (см. документацию). Он просто добавляет переменную 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);
    } 
});
person Sean    schedule 10.02.2016

arrow_upward
0
arrow_downward

Это распространенная проблема с событиями во вложенных объектах, как получить контекст данных объекта, на который нажали?

Самый простой способ решить эту проблему — создать шаблон для каждого уровня вложенности. Затем соответствующий контекст предоставляется автоматически.

<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);
  } 
});
person Michel Floyd    schedule 10.02.2016
comment
Этот метод даст вам доступ только к свойствам task в вашем втором шаблоне. Ему нужен доступ как к task, так и к goal. - person Sean; 10.02.2016
comment
Вы также всегда можете получить доступ к свойствам родителя, используя Template.parentData(n) документы. - person Michel Floyd; 10.02.2016