Question

How do I use jQuery functions in a custom knockout extender. Here is an example of adding a class to a knockout target from a custom extender.

ko.extenders.addClass = function(target, option) {
    if (option == true)
    {
        target.subscribe(function(newValue) {
            $(this.target).addClass('new_class');
        });
    }
    return target;
}

Answer 1

Combine a normal dirty-flag with the css-binding.

ko.dirtyFlag = function(root) {
    var result = function() {}, // A function will not get serialized to JSON
        _initialState = ko.observable(ko.toJSON(root));

    result.isDirty = ko.dependentObservable(function() {
        return _initialState() !== ko.toJSON(root);
    });

    result.reset = function() {
        _initialState(ko.toJSON(root));
    };

    return result;
};

function ViewModel() {
    // Normal properties
    this.someProperty = ko.observable("initial value");

    // Dirty-flag for this object.
    this.dirtyFlag = ko.dirtyFlag(this);
}

<div data-bind="css: { 'new_class': dirtyFlag.isDirty }"></div>

You could also pass an observable, or an array of observables, if you want to track just a subset of the properties.

this.dirtyFlag = ko.dirtyFlag(this.someProperty);

http://jsfiddle.net/MizardX/7esdy/