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

或者，我可以在会话var中保留父级并从那里拉出来：

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

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

1 个答案: