CODEWITHSUNDEEP
javascript
Ilijanovic
Ilijanovic

Reputation: 14924

proxy does not interecept object

I have this following problem here:

I try to create a mini framework for learning / experimenting purposes. I have this markup

 <button click="cool">click me</button>

This is my custom attribute to bind event handlers. I collect them like this:

document.querySelectorAll("[click]").forEach(listener => {
  let name = listener.attributes.click.nodeValue;
  listener.addEventListener(
    "click",
    this.staticProp[name].bind(this.staticProp)
  );
});

Everything happens inside an class. I pass my properties that i want to make reactive like this:

new Tinyflow({
  prog: "programm",
  howDoesItWork: "good",
  age: 21,
  cool() {
    console.log("nice");
    console.log(this.age);
    this.age++;
  }
});

  constructor(properties) {
    this.reactivityHandler = {
      set(vars, prop, newVal) {
        console.log("i work");
      },
      get(data, prop, newVal) {
        console.log("i work");
      }
    };
    this.staticProp = properties;
    this.passedProps = new Proxy(this.staticProp, this.reactivityHandler);
  }

I expect that the reactivityHandler gets triggered whenever my props changes, but nothing happens. In my console i see nice and how age increases but i dont see i work.

Why doesnt the proxy intercept it?

Upvotes: 0

Views: 41

Answers (1)

Aplet123
Aplet123

Reputation: 35560

You set this.passedProps to the Proxy, while you access the properties directly with this.age. If you want it to go through the proxy, then access the properties through this.passedProps.age and this.passedProps.age++.

Upvotes: 3

Related Questions