How do I bind a function to a change in an object's data member in Javascript?

Question

I'm working on a project in JavaScript where we're building a Greasemonkey plugin to an organizational site we're using in our office. We're having trouble getting our changes to stay rendered, since we can't simply inject our changes into the existing render function.

As a result, we need to find every event where rendering happens and inject our own render function there. However, there are some events that we can see happening, but we can't hook into them. What I'd like to know is how to bind a function to an object's data member, so that the function is called whenever that member changes. One of our team members seemed to think it was possible, but the method he told us to use didn't seem to work.

What we tried was something along the lines of

window.Controller.bind("change:idBoardCurrent", OMGITWORKED);

where idBoardCurrent is a member of window.Controller and OMGITWORKED is the function we'd like to be called when window.Controller.idBoardCurrent is changed.

I'm not very familiar with JavaScript or data binding, so I have no idea if this is right or wrong, or what is correct or incorrect about it. If someone could point out what to change in this snippet, or if they could suggest another way to go about this, I would be very appreciative.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You can use Object.defineProperty to define a setter and getter for the Objects property

Object.defineProperty(window.Controller,"idBoardCurrent",{
      get : function() { return this.val; },
      set : function(value) {this.val = value;OMGITWORKED(value); }
});
function OMGITWORKED(param) {
  console.log("idBoardCurrent has been Changed to " + param);
}

window.Controller.idBoardCurrent = "Test";
window.Controller.idBoardCurrent = "Test2";
console.log(window.Controller.idBoardCurrent)

Edit: changed the code according to the contexts object

JSBin

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 25 '12 at 13:36

Moritz Roessler

8,014
22
50

Your answer looked promising, but the Object here (window.Controller) does not have a defineProperty method. It only has a bind method, which is why we were using that originally. – Sean Cogan Jul 25 '12 at 13:44
where does the window.Controller object come from ? can't you do `Object.defineProperty(window.Controller`,"idBoardCurrent",....)` since its an Object, the "main" Objects Method (defineProperty) should be able to define a propertie on it. (not the window.Controller has the method, its the javascripts Object object) – Moritz Roessler Jul 25 '12 at 13:50
Thanks very much. With my limited Javascript experience, I didn't realize exactly what you meant originally, but I implemented the changes you made and it works perfectly! – Sean Cogan Jul 25 '12 at 14:00

score 1 · Answer 2 · answered Jul 25 '12 at 13:32

As this is specifically Firefox, you can use the mutation events it provides. But note the caveats on them from that page:

The W3C specification for them was never widely implemented and is now deprecated
Using DOM mutation events "significantly degrades" the performance of DOM modifications

If you're able to restrict yourselves to Firefox 14 and higher, you can use the new mutation observers stuff instead.

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

This is, when I am not totally wrong, more a question of javascript. I found some information about that topic

Listening for variable changes in JavaScript or jQuery

jQuery trigger on variable change

Javascript Track Variable Change

Sorry when I didn't understand the topic.

All the best

edited May 23 '17 at 12:29

Community

1
1

answered Jul 25 '12 at 13:41

devanand

4,206
2
18
19

How do I bind a function to a change in an object's data member in Javascript?

3 Answers3