Is there a change tracking system for JavaScript?

Question

ASP.NET AJAX 4 recently added the ability to track client-side changes to ADO.NET Data Services objects. This made me wonder what other JavaScript libraries exist to track changes. Has anyone seen or are you using any?

EDIT: just to clarify what I mean by "change tracking": the new version of ASP.NET AJAX allows you to get a JavaScript object, make changes to it on the client, and then send only those changes to the server.

Answer 1

I don't know the scope, but using prototype inheritance and hasOwnProperty , it is almost trivial to collapse your own.

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var objectToTrack = getFromServer();
var objectToModify = object(objectToTrack);

edit(objectToModify); // let the user edit it...

var changes = {};
for(var p in objectToModify) {
   if(objectToModify.hasOwnProperty(p)) {
     changes[p] = objectToModify[p];
   }
}
sendChanges(changes);

One caveat: prototype inheritance (due to lack of a better word) is "shallow." If the object has any properties of the array or object, then changing them will change the original, which may not be what you want. They will also not be found hasOwnProperty. To fix this, your editing logic should be aware of when the user properties of a sub-object or array are edited by the user and tracked individually, using the same technique. eg.

var foo = { foo: [1,2,3], bar: 0, baz: { hello: "world!" } };
var bar = object(foo);
bar.foo[1] = 3; 
// foo.foo[1] is now also 3, but bar.hasOwnProperty('foo') returns false
bar.bar = 123; // foo is unchanged, bar.hasOwnProperty('bar') returns true

function editFooArray(index,value) {
   if(!bar.hasOwnProperty('foo')) {
     // copies the array, bar now hasOwnProperty('foo')
     bar.foo = bar.foo.slice(0); 
   }
   bar.foo[index] = value;
}

function editBazObj(property,value) {
   if(!bar.hasOwnProperty('baz')) {
     bar.baz = object(foo.baz);
   }
   bar.baz[property] = value;
}

Answer 2

, , ( ) Entity Modeling Javascript Framework, "tent" (kinda lame name...), :

https://github.com/benjamine/tent

JSDoc , js-test-driver.

:

   var myobject = { name: 'john', age: 34 };

   // add a change handler that shows changes on alert dialogs
   tent.changes.bind(myobject, function(change) {
       alert('myobject property '+change.data.propertyName+' changed!');
   });

   myobject.name = 'charly'; // gets notified on an alert dialog

Array (, ). , "Entity", (, , ), , , , 1--1, 1--N N-to-M ..

Answer 3

, , , . / api (dojo, yui 2/3, ext, sproutcore, activejs) -, .

Sproutcore / . , , , .

Answer 4

, ( ):

Comet