Reputation: 14924
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
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