Question

我试图从事件处理程序访问我的模板的数据上下文，但它是null。

这是我的模板：

<template name="calendar">
  <div class="calendar">
    {{#with calendar}}
      <h1>{{name}}</h1>
      {{#each days}}

         <div class="calendar-day">
           {{this.date.getDate}}
<!-- I want to access the data context when this div is pressed -->
         </div>

      {{/each}}
    {{/with}}
  </div>
</template>

这是我想要获取数据上下文的地方。

Template.calendar.events({
  'click .calendar-day': function(e, template) {
    console.log(Template.currentData()); // null
    console.log(Template.parentData()); // null
  }
});

更新：我能够通过this访问当前数据上下文，但我也想访问父项的数据上下文，即calendar的数据上下文

Answer 1

行。让我说清楚;

Template.calendar.events({
  'click .calendar-day': function(e, template) {
    //FYI: template === Template.instance()

    //will give you your data context
    console.log(this); 

    //will give you your data context
    console.log(template.data); 

    //will give you your data context
    console.log(Template.currentData()); 

    //will give you your data context also
    console.log(Template.parentData(0)); 

    //will give you your parent template data context. Equivalent of Template.parentData()
    console.log(Template.parentData(1)); 

  }
});

如果事实证明你的父数据是null，那么它是null，请仔细检查它。

Answer 2

您可以从this获取上下文。

Template.calendar.events({
  'click .calendar-day': function(e, template) {
    console.log(this);
  }
});

Answer 3

Blaze中可能存在一个错误 - github有3个或4个与此相关的未解决问题，所以我自己也没有提出具体问题。

问题在于在单个模板中具有多个数据上下文;此修复是通过拆分模板来拆分上下文：

<template name="calendar">
  <div class="calendar">
    {{#with calendar}}
      <h1>{{name}}</h1>
      {{#each days}}
        {{> calendarDay}}
      {{/each}}
    {{/with}}
  </div>
</template>

<template name="calendarDay">
  <div class="calendar-day">
    {{this.date.getDate}}
    <!-- I want to access the data context when this div is pressed -->
  </div>
</template>

然后将您的活动移至新模板：

Template.calendarDay.events({
  'click .calendar-day': function(e, template) {
    console.log(Template.currentData()); // no longer null!
    console.log(Template.parentData()); // no longer null!
  }
});

在此事件中，您现在可以访问以下数据上下文：

console.log(this);                    // the {{#each days}} context
console.log(template.data);           // the {{#each days}} context
console.log(Template.currentData());  // the {{#each days}} context
console.log(Template.parentData(0));  // the {{#each days}} context
console.log(Template.parentData(1));  // the {{#with calendar}} context

通过使用上述模式，我设法解决了与OP相同的问题，但仅在经过2-3小时的调查之后！

模板事件处理程序的流星数据上下文为空

3 个答案: