javascript - 从事件中获取父模板上下文的规范方法？

Question

给定:

<template name="child">
  <button class=".child.button">Click Me</button>
</template>

<template name="parent">
  {{#each children}}
    {{> child }}
  {{/each}}  
</template>

我希望能够将一个事件链接到可以访问父对象的子模板中的按钮。

可能的解决方案:

我可以将父级存储在 dom 中并执行如下操作:

Template.child.events({
  'click .child.button': function (event, template) {
    console.log('In this context \'this\' is the CHILD');
    // I want the parent object
    // I could pull a ref from the Dom? Seems messy.
    var parentId = $(event.currentTarget).closest('.parentClass').data('id');
    // Do something for this child using parent here
    return false;
  }
});

或者，我可以将父级保存在 session 变量中并从那里拉出它:

Router.map(function() {
  this.route('parent', {
    path: '/parents/:_id',
    data: function () {
      // Get the current parent and put it into the session
      var thisparent = Parents.findOne(this.params._id);
      Session.set('currentParent', thisparent);
      return {
        parent: thisparent
      };
    }
  });
});

然后:

Template.child.events({
  'click .child.button': function (event, template) {
    console('the parent is: ', Session.get('currentProject'));
    return false;
  }
});

但理想情况下，我更喜欢更简洁的解决方案，而且感觉这应该是可能的。

Answer 1

到目前为止，您无法使用 API 从事件中访问父数据。

在您可以使用的助手中:

UI._parentData()

但是从一个事件中返回 null。

最好的解决方案是使用一些 templating wizardry :

{{#each children}}
    {{#with context=this parent=..}}
        {{> child this}}
    {{/with}}
{{/each}}

允许:

Template.child.events({
  'click .child.button': function (event, template) {
    console('the parent context is: ', this.parent);
    console('the current context is: ', this.context);
    return false;
  }
});