javascript - How to create dirty flag functionality - Stack Overflow

admin管理员组

文章数量:1324807

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 example found on knockout js tutorial Loading and Saving data. Link to tutorial

I am following fiddle example posted by Ryan here

I am not able to understand where to declare below code which he has declared in view model.

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

If i take example from knockout tutorial the link which i posted above and i tried like below

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

}

Binded my view like below

<button data-bind="click: saveOperation , enable: isDirty" >Save</button>

It gives me error as unable to parse binding isDirty is not defined.

I am not sure how to go on implementing this.

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 example found on knockout js tutorial Loading and Saving data. Link to tutorial

I am following fiddle example posted by Ryan here

I am not able to understand where to declare below code which he has declared in view model.

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

If i take example from knockout tutorial the link which i posted above and i tried like below

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

}

Binded my view like below

<button data-bind="click: saveOperation , enable: isDirty" >Save</button>

It gives me error as unable to parse binding isDirty is not defined.

I am not sure how to go on implementing this.

• javascript
• knockout.js

Share Improve this question Follow edited Feb 8, 2013 at 10:25 DevelopmentIsMyPassion asked Jan 28, 2013 at 17:05 DevelopmentIsMyPassionDevelopmentIsMyPassion 3,59144 gold badges3636 silver badges6161 bronze badges 3

• 1 I haven't used this project, but I looked at it: github./romanych/ko.editables seems to be what you need. – Joe Commented Jan 28, 2013 at 17:23
• possible duplicate of Knockout.js ViewModel change callback? – Jeroen Commented Jan 28, 2013 at 22:13
• I have found fiddle based on knockout tutorial. I modified it and added dirtyflag in Task. I am trying to use KoLite here. I get error on Cancel button that dirtyFlag is not defined jsfiddle/ashreva/bGsRH/234 – DevelopmentIsMyPassion Commented Feb 8, 2013 at 13:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

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 puted. 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.inpleteTasks = ko.puted(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/delixfe/ENZsG/6/

There is also the ko.editables plugin: https://github./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.mit();
user.hasChanges();          // returns `false`
user.Address.Country('Ukraine');
user.hasChanges();          // returns `true`
user.rollback();
user.Address.Country();     // returns 'USA'

本文标签： javascriptHow to create dirty flag functionalityStack Overflow