流星:#each 循环事件处理程序没有上下文
Meteor: No context for #each loop event handlers
我使用带有非托管本地集合的#each 循环为表单生成一系列输入字段。但是,当我尝试在事件处理程序中使用 this._id
时,它是未定义的。事实上,传递给事件处理程序的上下文是针对 window 的。非常感谢任何有助于找出问题所在以及我应该如何在我的事件处理程序中获得正确上下文的 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>
和 js:
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
已在 DOM 中正确分配,但删除子 class 正在记录 window
上下文。
您正在使用 ES6 arrow functions,它将在词法上将 this
与父范围绑定。因此,您无法获得 children
.
的范围
为了解决问题,只需将模板事件更改为:
Template.signup.events({
// ...
'click .remove-child': function (event, template) {
console.log(this);
}
// ...
});
我使用带有非托管本地集合的#each 循环为表单生成一系列输入字段。但是,当我尝试在事件处理程序中使用 this._id
时,它是未定义的。事实上,传递给事件处理程序的上下文是针对 window 的。非常感谢任何有助于找出问题所在以及我应该如何在我的事件处理程序中获得正确上下文的 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>
和 js:
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
已在 DOM 中正确分配,但删除子 class 正在记录 window
上下文。
您正在使用 ES6 arrow functions,它将在词法上将 this
与父范围绑定。因此,您无法获得 children
.
为了解决问题,只需将模板事件更改为:
Template.signup.events({
// ...
'click .remove-child': function (event, template) {
console.log(this);
}
// ...
});