Метеор: контекст для обработчиков событий #each

Question

Я использую цикл #each с неуправляемой локальной коллекцией для генерации последовательности полей ввода для формы. Однако, когда я пытаюсь использовать this._id в обработчике события, он не определен. Фактически, контекст передается обработчику событий для окна. Любая помощь, чтобы найти то, что идет не так и как я должен получить правильный контекст, как this в моем обработчике событий, очень ценится.

Код:

<h4 class="page-header">Children on this account</h4> 
{{#each children}} 
<div id={{_id}} class="form-group col-md-12 child-form-instance"> 
    <div class="form-group col-sm-5 col-xs-12"> 
     <input type="text" name="childFirstName" class="form-control" placeholder="Child's First Name"> 
    </div> 

    <div class="form-group col-sm-5 col-xs-10"> 
     <input type="text" name="childLastName" class="form-control" placeholder="Child's Last Name" value="{{_id}}"> 
    </div> 
    <div class="form-group col-xs-2"> 
     <button type="button" class="btn btn-danger remove-child" aria-label="remove child"> 
      <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </div> 
</div> 
{{/each}} 
<div class="form-group"> 
    <input type="button" id="addChild" class="btn btn-success" value="Add child"> 
</div> 

и ЯШ:

var children = new Mongo.Collection(null); 

Template.signup.onRendered(() => { 
    Modules.client.signupValidateSubmit({ 
    form: "#signup", 
    template: Template.instance() 
    }); 
    children.remove({}); 
    children.insert({}); //create one empty child 

}); 

Template.signup.events({ 
    'submit form': (event) => event.preventDefault(), 
    'click #addChild':() => { 
     children.insert({}); 
     console.log(children.find().fetch()); 
    }, 
    'click .remove-child':() => { 
     console.log(this); 
    } 
}); 

Template.signup.helpers({ 
    children() { 
     return children.find();  
    } 
}); 

Все работает отлично с помощью кнопки AddChild, и _id s становятся правильно назначены в DOM, но удалить класс -child регистрирует контекст window.

Answer 1

Вы используете ES6 arrow functions, который будет лексически связывать this с родительской областью. Как следствие, вы не получаете объем children.

Для того, чтобы решить эту проблему, просто изменить событие шаблон для:

Template.signup.events({ 
    // ... 
    'click .remove-child': function (event, template) { 
     console.log(this); 
    } 
    // ... 
});