I have my data, and I am trying to access it within an initializer inside setTimeout.
data() {
return { val: {} }
},
methods: {
test() {
console.log(this.val) // works
var self = this
setTimeout(function() {
console.log(this.val) // works
var check = this.myMethod()
$.validate({
onError: function($form) {
console.log(self.val) // doesn't work
}
})
}, 500)
},
myMethod() {
// some stuff
return true
}
}
This is the updated code. Using the var self = this approach, I am now gettign:
Uncaught TypeError: this.myMethod is not a function
data() {
return { val: {} }
},
methods: {
test() {
console.log(this.val) // works
var self = this;
setTimeout(function() {
console.log(self.val) // works
$.validate({
onError: function($form) {
console.log(self.val) // doesn't work
}
})
}, 500)
}
}
Try this. You often lose the value of this when calling functions within functions, so we store this in a variable to make it accessible from nested functions.
methods: {
test() {
console.log(this.val) // works
// for this -> self trick
let self = this;
setTimeout(function() {
console.log(self.val) // works
$.validate({
onError: function($form) {
console.log(self.val) // doesn't work
}
})
}, 500)
}
}
Related
in my Angular 5 project I have some problems with the callback from an external library. I load it using
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="my-site"> </script>
and then in Angular I import it as follows:
declare var Chargebee: any;
Chargebee.init({site: "my-site"});
I also have a public variable in my component, lets say publicVar, which I am displaying in the template.
publicVar: string = 'before checkout';
I have the following method:
subscribeToPlan() {
var _self = this;
var chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.openCheckout({
hostedPage: function() {
_self.publicVar = 'hosted-page';
console.log('hosted-page');
},
success: function(hostedPageId) {
_self.publicVar = 'success';
console.log('success');
},
close: function() {
_self.publicVar = 'closed';
console.log('closed');
}
});
}
What is happening when I run the code?
All the console.log functions output the correct data, so I know the chargebee callbacks are called. However, only hostedPage: function() {} correctly changes my publicVar, and it says "hosted-page" in my template.
success: function(){} nor close: function(){} won't update the publicVar in my template. I suspect because these are, unlike the hostedPage, a callback methods and the self. in them has wrong context?
So I worked it out (or found a workaround)
As the _self did hold the correct data, I thought that the change detection is not triggered for those callbacks. After I've manually triggered it, it all works as expected.
Final code and changes:
Import
import { ChangeDetectorRef } from '#angular/core';
Add it to the constructor:
constructor(private cd: ChangeDetectorRef)
And then call it at the end of the callback method, this will manually trigger Angular change detection, and updates template rendering of publicVar
subscribeToPlan() {
var _self = this;
var chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.openCheckout({
hostedPage: function() {
_self.publicVar = 'hosted-page'; // This is not a callback, so it just works
console.log('hosted-page');
},
success: function(hostedPageId) {
console.log('success');
_self.publicVar = 'success';
_self.cd.detectChanges(); // Manual change detection
},
close: function() {
console.log('closed');
_self.publicVar = 'closed';
_self.cd.detectChanges(); // Manual change detection
}
});
}
Alternative code using the arrow functions, as per Joe's suggestion (https://stackoverflow.com/a/50335020/5644425)
subscribeToPlan() {
var chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.openCheckout({
hostedPage: () => {
this.publicVar = 'hosted-page';
console.log('hosted-page');
},
success: hostedPageId => {
console.log('success');
this.publicVar = 'success';
this.cd.detectChanges();
},
close: () => {
console.log('closed');
this.publicVar = 'closed';
this.cd.detectChanges();
}
});
}
Rather than assigning this to some variable _self you could just use arrow functions, which don't affect the scope of this:
subscribeToPlan() {
var chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.openCheckout({
hostedPage: () => {
this.publicVar = 'hosted-page';
console.log('hosted-page');
},
success: hostedPageId => {
this.publicVar = 'success';
console.log('success');
},
close: () => {
this.publicVar = 'closed';
console.log('closed');
}
});
}
And without the logging this becomes the even neater:
subscribeToPlan() {
var chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.openCheckout({
hostedPage: () => this.publicVar = 'hosted-page',
success: hostedPageId => this.publicVar = 'success',
close: () => this.publicVar = 'closed'
});
}
Though I think your code should work fine. You're assigning this to _self and using that, so the this of the functions shouldn't matter. I'd definitely recommend putting in a breakpoint and checking what _self is in those two functions.
I am trying to get the name of the parent function of the function being called.
For example if I have these functions:
var functions = {
coolfunction1: {
add: function () {
},
delete: function () {
},
save: function () {
}
},
coolfunction2: {
add: function () {
// i want to console.log() the name of the parent of this function,
// output: coolfunction2
},
delete: function () {
},
save: function () {
}
}
}
When I call functions.coolfunction2.add(), is there a way to log the name of the parent function that was run?
I know I can use the variable this but that only outputs the names of the children functions, add(), delete(), save().
How can I know that the coolfuntion2 was run?
I know this can be done manually, by rewriting the function name in the add() function, but is there a way to get the name dynamically?
You can add a getter to those methods as
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2]; //save a reference to function since it won't be a function anymore once a getter is assigned
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t); //print the name of parent property or grand-parent property, etc
//func();
return func; //return the reference to this function
}
});
})
);
Demo
var functions = {
coolfunction1: {
add: function() {
},
delete: function() {
},
save: function() {
}
},
coolfunction2: {
add: function() {
console.log("a is invoked");
},
delete: function() {
},
save: function() {
}
}
};
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2];
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t);
//func();
return func;
}
});
})
);
functions.coolfunction2.add();
functions.coolfunction2.add();
functions.coolfunction1.add();
so I started to using interactjs
and I have this simple code:
class example {
registerTouchEvents() {
var self = this;
interact('.touchy').draggable({
onstart: self.onStart,
});
}
onStart(event) {
this.someAction();//<-- not working as this is interact object
}
someAction() {
console.log('touch has been started') //<-- I need to call this function
}
}
is there someway of calling the current object without using global variable?
Move the handler where you declare "self":
class example {
registerTouchEvents() {
var self = this
, onStart = function onStart(event) {
self .someAction();
}
;
interact('.touchy').draggable({
onstart: onStart,
});
}
someAction() {
console.log('touch has been started') //<-- I need to call this function
}
}
I made a simple example of my problem with a babel object :
function babel(){
this.english = {
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { alert('T-shirt'); }
}
}
Now, I want to extends this object :
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('au revoir'); }
}
But what if I need to use an existing function define before ?
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { this.english.teeshirt(); }
}
What I could do is :
var say = new babel();
(function (_this) {
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
hello: function () { _this.english.hello(); }
}
})(say);
But in this case, I will always use the context of the say object, isn't it ?
The problem is, that in teeshirt function call this points to the french object, not babel object. If you have to access parent object, you should store reference to it somewhere. For example you can change your constructor like this:
function babel(){
this.english = {
parent: this,
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { this.parent.french.something(); }
}
}
But as you can see, there is a problem if you don't create object in constructor. I don't see any 'nice' approach, but you can do this:
function babel(){
this.english = {
parent: this,
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { this.parent.french.something(); }
};
for (var i in babel.prototype) {
this[i].parent = this;
}
}
Then your french will look like this:
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { this.parent.english.teeshirt(); }
}
While the question as asked does bring up all the fascinating issues with JavaScript's this and prototypal inheritance, I would suggest simplifying the whole problem and refactoring your objects. There are a couple ways to do this.
If the English version of teeshirt is the default, it should be in the object which is at the end of the prototype chain. That is, a French object would have as its prototype an English object. The French object would simply not contain a teeshirt member. This is similar to the way resource bundles work.
Now this idea may not work for you, because the relationship among the different bundles may be complex: perhaps sometimes Engish is a fallback sometimes but not other times. In this case, see if you can make your babel objects all singletons (i.e., just plain objects).
var babel = {}
babel.english = {
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); },
teeshirt: function () { alert('T-shirt'); }
}
babel.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { babel.english.teeshirt(); }
}
babel.english.teeshirt();
babel.french.teeshirt();
Try it at http://jsfiddle.net/yRnLj/
I realize this looks like a complete avoidance of your interesting question. But if you only need one copy of each language bundle, it is a lot simpler. :-)
How can I make my tabs variable private and only accessible from within the return {}... console.log(tabs) returns undefined...
$(document).ready(function () {
Site.page = (function () {
return {
init: function () {
Site.page.tabs.init();
},
//manage deal tabs
tabs: (function () {
var tabs = null;
return {
init: function () {
console.log(tabs);
},
show: function (tab) {
$('#deal-tabs > div.selected').removeClass('selected');
$(tab).addClass('selected');
}
}
})()
}
}());
Site.page.init();
});
Why did you name both the function and the variable the same name? If you only need the variable in return{} then declare it in that block of code, not outside.