1

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.

Vincent De Jong
  • 21
  • 5

2 Answers2

2

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();
re-za
  • 750
  • 4
  • 10
0

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();
Nick
  • 1,439
  • 2
  • 15
  • 28
  • Yes. I've done this. However I will make different Form classes and they'll be calling the same Popup class. Therefore I wanted to know how to attach one of the form method's dynamically. Not explicitly like you've done here. – Vincent De Jong Mar 19 '22 at 17:49
  • @VincentDeJong Is the problem that the other Form classes might not have a method called `endMethod`? That they have a different method to be called from the popup? If that's the case try my answer. Otherwise could you provide an example of the unexpected behavior? – re-za Mar 19 '22 at 20:55
  • @VincentDeJong You have to change your question. My answer resolve the problem you have described. Clarify your new requirement.... – Nick Mar 19 '22 at 22:29