[英]How to access to $(this) when bind(this) is used?
Suppose I have a form attached to the following javascript function: 假设我有一个表单附加到以下javascript函数:
$('#foo').submit(function (event)
{
event.preventDefault();
if (!this.validate()) {
return;
}
console.log($(this).attr('action'));
}.bind(this));
now the main problem is that the submit
function attached to #foo
is available inside a class which contains other functions, eg: validate
: 现在的主要问题是,
submit
附着功能#foo
可包含多种功能,例如类中: validate
:
Helper.prototype.validate = function()
{
// some content
}
I need to access to those functions using this
, so I attached at the end of the submit
the code: bind(this)
and I'm able to invoke the validate
function of Helper
class simply using this.validate
. 我需要使用
this
来访问这些函数,因此我在submit
代码的末尾附加了bind(this)
并且仅使用this.validate
就能调用Helper
类的validate
函数。
The scenario above will cause some issue on the $(this)
parameter, infact if I try to access to the action
of the form, then I'll get an empty string because javascript will search the variable action
inside the class Helper
. 上面的场景会导致
$(this)
参数出现问题,如果我尝试访问表单的action
,实际上会出现一个问题,那么我将得到一个空字符串,因为javascript会在Helper
类中搜索变量action
。
If I remove bind(this)
I can access to the action of the form, but I'll lose the access to validate
function. 如果删除
bind(this)
,则可以访问表单的操作,但是将失去对validate
函数的访问权限。
Someone have an idea to fix this? 有人有解决此问题的想法吗?
The generic structure of the js file is this: js文件的通用结构是这样的:
function()
{
Helper.prototype.bindEventHandlers = function()
{
$('#foo').submit(function (event)
{
event.preventDefault();
if (!this.validate()) {
return;
}
console.log($(this).attr('action'));
}.bind(this));
Helper.prototype.validate = function()
{
...
});
}
}
You can't. 你不能
The entire point of bind
is that you replace the value of this
. bind
的全部要点是替换this
的值。
If you want to have access to this
and another value, then don't use bind. 如果要访问
this
值和另一个值,请不要使用bind。 Store the value in a different variable. 将值存储在其他变量中。 Consider an IIFE instead:
考虑使用IIFE:
$('#foo').submit(
function (context) {
return function(event) {
event.preventDefault();
if (!context.validate()) {
return;
}
console.log($(this).attr('action'));
}
}(this)
);
You might want to split it up to make it less unwieldy: 您可能希望将其拆分以减少使用麻烦:
function thingy_factory(context) {
function thingy(event) {
event.preventDefault();
if (!context.validate()) {
return;
}
console.log($(this).attr('action'));
}
return thingy;
}
and 和
$('#foo').submit(thingy_factory(this));
I would say instead of relying on the keyword this
, just set up a reference to the current value of this
outside of the jQuery callback. 我想说的不是依靠关键字
this
,刚刚成立的当前值的引用this
外jQuery的回调。
function(){
Helper.prototype.bindEventHandlers = function(){
var context = this;
$('#foo').submit(function (event){
event.preventDefault();
if(!context.validate()){
return;
}
console.log($(this).attr('action'));
});
}
Helper.prototype.validate = function(){
...
});
}
I moved Helper.prototype.validate out of the the bindEventHandlers
, I'm assuming that's what your intention is. 我将Helper.prototype.validate从
bindEventHandlers
移出了,我假设这就是您的意图。 Might have just been a formatting error. 可能只是格式错误。
Before of $('#foo').submit
you can add var that = this;
在
$('#foo').submit
您可以添加var that = this;
and validate function will be called in this way: that.validate()
和validate函数将以这种方式调用:
that.validate()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.