如何创建脏标志功能 [英] How to create dirty flag functionality

问题描述

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

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

我跟随Ryan发布的小提琴示例这里

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

}

我的视图如下所示

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

由于无法解析绑定而导致错误，因此未定义isDirty。

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

我不知道如何继续实施。

I am not sure how to go on implementing this.

推荐答案

您的代码有几个问题：

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

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

你必须在加载之后定义脏标志数据或你必须调用 dirtyFlag（）。reset（）。

isDirty 是计算出来的。你必须用括号来调用它。

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

视图模型如下所示：

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/

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

这篇关于如何创建脏标志功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！