I am trying to create a pop up menu (via a class) called from another class. After these inputs are filled in I want the input data to be processed by the object from which the pop up menu was initiated.
My thought process created the following code (simplified ofc):
class foo{
constructor(){
this.prroperty = 'yes';
}
eventMethod(){
let eventForm = new bar();
eventForm.fire(this.endMethod);
}
endMethod(values){
// console.log(this);
console.log(values + this.prroperty);
}
}
class bar{
constructor(){
this.property = 'no';
}
fire(callback){
let value = 'message';
callback(value);
}
}
let object = new foo();
object.eventMethod();
this doesn't work obviously because "this" now no longer referes to the foo created object. I'm planning on using the controller from the foo class and the popup menu created by the bar class a lot. Therefore I'm using classes instead of creating single objects.
My question is if there is a way to deliver and process the values while still being able to do so within classes instead of objects because i want to use them multiple times.
I changed the foo and bar to Form and Popup:
1) Quick — and possibly dirty — solution:
You can send this as the second argument to .fire():
class Form {
constructor() {
this.property = 'yes';
}
eventMethod() {
let popup = new Popup();
popup.fire(this.endMethod, this);
}
endMethod(values, that) {
console.log(values + that.property);
}
}
class Popup {
constructor() {
this.property = 'no';
}
fire(callback, that) {
let value = 'message';
callback(value, that);
}
}
let form = new Form();
form.eventMethod();2) Using .bind()
More robustly, you can use the .bind() method to bind the Form this to endMethod before sending it out:
class Form {
constructor() {
this.property = 'yes';
}
eventMethod() {
let popup = new Popup();
popup.fire(this.endMethod.bind(this));
}
endMethod(values) {
console.log(this);
console.log(values + this.property);
}
}
class Popup {
constructor() {
this.property = 'no';
}
fire(callback) {
let value = 'message';
callback(value);
}
}
let form = new Form();
form.eventMethod();This is a simple possible solution. You can pass to the popup the whole "this" form instance
class Form {
constructor() {
this.property = 'yes';
}
eventMethod() {
let popup = new Popup();
popup.fire(this);
}
endMethod(values) {
console.log(values + this.property);
}
}
class Popup {
constructor() {
this.property = 'no';
}
fire(form) {
let value = 'message';
form.endMethod(value);
}
}
let form = new Form();
form.eventMethod();