如何创建脏标志功能

Question

我想使用knockout创建脏标志功能。我想只在事情发生变化时启用保存按钮。我的视图和我的视图模型与在knockout js教程加载和保存数据上找到的示例完全相同。 Link to tutorial

我正在关注Ryan here

发布的小提琴示例

我无法理解在视图模型中声明的下面代码的位置。

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

如果我从淘汰教程中获取示例我上面发布的链接，我尝试如下

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

}

我的观点如下

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

它给出了错误，因为无法解析绑定isDirty未定义。

我不知道如何继续实施。

Answer 1

淘汰赛的脏标志已在小型图书馆koLite - https://github.com/CodeSeven/kolite中实施。

或者以下是创建它的示例：http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

Answer 2

您的代码有几个问题：

1. 您正在dirtyFlag功能上定义Task。但是你是在绑定到viewModel实例的视图上检查它。

2. 您必须在加载数据后定义脏标志，否则您必须致电dirtyFlag().reset()。

3. isDirty是计算出来的。你必须用括号来称呼它。

视图模型如下：

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();
        }
    });                               
}

取消按钮的绑定：

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

可以在http://jsfiddle.net/delixfe/ENZsG/6/

找到工作小提琴（你的叉子）

Answer 3

还有ko.editables插件：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'