Jquery listen to non dom object change event?

Question

I have an object which does change on user action continuously to keep track of the grid so i thought that if its possible to trigger an event as soon as the object changes? I know this can be done but can we just not register an event on object and as soon as the object changes we can trigger the event which calls a function dealing with the state of object?

What i have came up with works but i have to manually trigger each time i change object can we just sit there and wait for object to change and act upon it ?

 $( requestProcessStatus ).trigger ("valueChanged"); // trigger this each time object changes` 

$( requestProcessStatus ).bind("valueChanged", function() {
console.log("object changed");
}); // do whatever in here 


 requestProcessStatus : {
    RequestNumber : '',
    ProcessStatus : '',
    LoanTrackingInfo : [
      LocalNumber: '',
      ProcessStatus: ''
    ]
},

I have this object and as soon as user enters the LocalNumber in textbox i fire up ajax request and if the response is successful the LoantrackingInfo array gets populated with LocalNumber and the proccessStatus= Success and it can scale upto infinite. As soon as the object changes i want to reflect those changes in my grid which displays all the localnumber and its corresponding status in grid?

So is it possible to just listen to the object change event ?

Answer 1

You could wrap the "set + trigger" inside a method :

requestProcessStatus.setVal = function( attr, value ){
   this[attr] = value;
   $(this).trigger('valueChanged');
}

Obviously, you will have the responsibility to only modify the object through this method if you want the event to always trigger ...

Answer 2

"can we just sit there and wait for object to change and act upon it ?"

Yes, but it would be VERY inefficient, you're best off doing what you're already doing.

This is how you would do it though:

previousObjectState = {};
function checkForChanges () {
    // iterate over object looking for changes
    if (changes happened) {
        $(theObject).trigger("change");
    }
    previousObjectState = $.extend(true,{},theObject);
}

setInterval(checkForChanges,100);

It would have to parse and look for changes every n ms, which can be very expensive.

Answer 3

You will either have to use a framework like Angular or Knockout.

Or do the setInterval trick, mentioned by Kevin B.

Or, if you are only using really modern browsers and don't mind the hassle, use property getters. See ref here at "Defining getters and setters" and run the following example in your browser's console (responses from JS start with > ):

a={}
Object.defineProperty(a,"x",{
    get:function(){ return 5; },
    set:function(v){ console.log(v); }
})
a.x
> 5
a.x = 9
> 9
a.x
> 5

Now the hassle is that you will have to define the entire object like that. Then, this is only one place and every time something changes, you will be notified.

But better use a framework...