Field-level change tracking with ASP.NET MVC4 & Knockout

Question

Wondering if anyone out there has experience with tracking field-level change tracking? We are trying to discern the easiest/best way to track any and all model modifications by end-users. I am using ASP.NET MVC4, Knockout, and Knockout Editables.

UPDATE: Due to the requirements of the tracking feature, just detecting if the object is dirty isn't enough, as I need to determine what has changed and the value. I have opted to use a for loop to iterate over the model properties, detecting changes with KO Editables.hasChanges() function, and building a custom log object from that using current value and .oldValue() (KO Editable).

score 8 · Answer 1 · answered Nov 06 '12 at 18:42

Since you mention wanting the easiest and best way to implement change tracking w/KnockoutJS, I suggest looking at what John Papa recently implemented as part of his Single Page Apps course for Pluralsight. You can read his blog post (link at bottom) on change tracking for more information.

The gist of it is this: he, along with Hans Fjällemark, and with tips from Steve Sanderson (KnockoutJS creator) and Ryan Niemeyer (KnockoutJS core contributor), created a custom change tracking tool, DirtyFlag. DirtyFlag is available as part of the KoLite Library, and can be downloaded from github or NuGet: Install-Package KoLite.

The blog post contains all of the steps required to get up and running:

http://www.johnpapa.net/spapost10/

This is a great post about detecting a "dirty" record, but I was looking for a way to know if LastName was changed from "Smith" to "Smiths". I've opted for a quick for loop over the model and using KO Editables .hasChanges() method to build a custom log. Thank you for the link though! — DeeDub, Nov 06 '12 at 20:52

score 1 · Answer 2 · answered Nov 06 '12 at 17:53

1

Here is an article where Ryan Niemeyer implemented such functionality: http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

answered Nov 06 '12 at 17:53

Artem Vyshniakov

16,355
3
43
47

score 1 · Answer 3 · edited Mar 25 '14 at 12:36

There is another workaround and I would implement like following

var self = this;

// Following property is binded with you to indicate has changes
self.hasChanges = ko.observable(false); 

// Following is the customer object and we want its field tracking
self.customer = ko.observable();

self.initializeCustomer = function (customer) {

    // Following loop read all the properties from customer object
    var properties = [];
    for (var prop in customer)
    {
        if(customer.hasOwnProperty(prop) && typeof customer[prop] !== 'function')
        {
            properties.push(prop);
        }
    }
    //following loop create new observable properties on trackingCustomer object and 
    // subscribe their event
    var trackingCustomer = {};
    for (var prop in properties)
    {
        trackingCustomer[properties[prop]] = ko.observable(properties[prop]);
        trackingCustomer[properties[prop]].subscribe(function (newvalue)
        {
            self.hasChanges(true);
        }
        );
    }

    self.customer(trackingCustomer);
};

score 0 · Accepted Answer · answered Nov 06 '12 at 20:55

Due to the requirements of the tracking feature, just detecting if the object is dirty isn't enough. I have opted to use a for loop to iterate over the model properties, detecting changes with KO Editables .hasChanges() function, and building a custom log object from that using current value and .oldValue() (KO Editable).

Field-level change tracking with ASP.NET MVC4 & Knockout

4 Answers4