如何创建脏标志的功能(How to create dirty flag functionality)

我想用淘汰赛创建脏标志的功能。我想启用只有当事情已经改变保存按钮。我的观点和我的观点模型为例如在淘汰赛JS教程加载和保存数据中找到完全相同。链接教程

我下面由Ryan发布小提琴例子在这里

我无法明白的地方下面的声明，他在视图模型已宣布的代码。

 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:

你的代码中有几个问题：

您所定义的dirtyFlag你的Task功能。但你在绑定到视图模型实例的视图检查它。
您必须加载的数据之后确定污损标志或你必须调用dirtyFlag().reset() 。
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 2:

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

或者是在这里创建它的一个例子： http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

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'

文章来源: How to create dirty flag functionality