How to create dirty flag functionality

Question

I want to create dirty flag functionality using knockout. I want to enable the save button only if something has changed. My view and my view model is exactly same as exampl

Answer 1

Your code has several problems:

1. You are defining the dirtyFlag on your Task function. But you are checking it on the view bound to the viewModel instance.

2. You have to define the dirty flag after you loaded the data or you have to call dirtyFlag().reset().

3. isDirty is a computed. You have to call it with parenthesis.

The view model looks like:

function TaskListViewModel() {
    // Data

    function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);

}

    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    this.dirtyFlag = new ko.DirtyFlag(this.isDone);

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.destroy(task) };
    self.save = function() {
        $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON({
                    tasks: this.tasks
                })
            },
            type: "POST",
            dataType: 'json',
            success: function(result) {
                self.dirtyFlag().reset();
                alert(ko.toJSON(result))
            }
        });
    };

     //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.ajax("/echo/json/", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedTasks = $.map(data, function(item) {
                return new Task(item);
            });

            self.tasks(mappedTasks);

            self.dirtyFlag().reset();
        }
    });                               
}

The binding for the cancel button:

<button data-bind="enable: dirtyFlag().isDirty()">Cancel</button>

And the working fiddle (a fork of yours) can be found at: http://jsfiddle.net/delixfe/ENZsG/6/

Answer 2

The dirty flag for knockout is already implement in the small library koLite - https://github.com/CodeSeven/kolite .

Or here is an example of creating it: http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

Answer 3

There is also the ko.editables plugin: https://github.com/romanych/ko.editables

var user = {
    FirstName: ko.observable('Some'),
    LastName: ko.observable('Person'),
    Address: {
        Country: ko.observable('USA'),
        City: ko.observable('Washington')
    }
};
ko.editable(user);

user.beginEdit();
user.FirstName('MyName');
user.hasChanges();          // returns `true`
user.commit();
user.hasChanges();          // returns `false`
user.Address.Country('Ukraine');
user.hasChanges();          // returns `true`
user.rollback();
user.Address.Country();     // returns 'USA'