3

我想使用淘汰赛创建脏标志功能。我只想在某些事情发生变化时启用保存按钮。我的视图和我的视图模型与淘汰赛 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 未定义。

我不确定如何继续执行此操作。

4

3 回答 3

4

用于淘汰的脏标志已经在小型库中实现koLite- https://github.com/CodeSeven/kolite。

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

于 2013-01-28T20:55:34.167 回答
3

您的代码有几个问题：

  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/

于 2013-02-11T19:01:52.353 回答
0

还有 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'
于 2013-02-08T20:22:38.950 回答