Канонический метод получения контекста родительского шаблона из события?

Данный:

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

но в идеале я бы предпочел более чистое решение, и мне кажется, что это возможно.


javascript meteor handlebars.js meteor-blaze
person Oliver Lloyd    schedule 02.07.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Пока вы не можете получить доступ к родительским данным из события с помощью API.

Из помощника вы можете использовать:

UI._parentData()

Но изнутри события это возвращает ноль.

Лучшее решение - использовать некоторые мастера создания шаблонов:

{{#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;
  }
});
person Marco de Jongh    schedule 02.07.2014
comment
Это делает код более читабельным, спасибо. Я дополнил ваш ответ примером с мероприятия. - person Oliver Lloyd; 02.07.2014
comment
@OliverLloyd Нет проблем. Не только более читабельное, но и ваше решение для области сеанса будет иметь проблемы с открытием нескольких вкладок. И решение для данных dom будет очень восприимчиво к взлому из-за небольших изменений dom. - person Marco de Jongh; 02.07.2014
comment
Ага, отсюда и вопрос! - person Oliver Lloyd; 02.07.2014
comment
@OliverLloyd Я бы не стал помещать контекст child в this.child. Поскольку код в событии теперь предполагает, что вы действительно получаете что-то от дочернего элемента ребенка как this == child, поэтому this.child == child.child - person Marco de Jongh; 02.07.2014
comment
Ах, так this поддерживает исходный контекст дочернего элемента. То есть: this == child? Значит, вам действительно не нужно передавать this.context для сохранения доступа к исходному объекту? - person Oliver Lloyd; 02.07.2014
comment
@OliverLloyd В искре да. Но в пламени вы либо понимаете контекст, либо приводимые аргументы. Итак, parent = .. Не добавляет родителя в контекст, он меняет контекст на {parent: object}. Вот почему мы вручную сохраняем исходный контекст с помощью context = this. - person Marco de Jongh; 02.07.2014