admin管理员组文章数量:1323342
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.
Share Improve this question edited Feb 8, 2013 at 10:25 DevelopmentIsMyPassion asked Jan 28, 2013 at 17:05 DevelopmentIsMyPassionDevelopmentIsMyPassion 3,5914 gold badges36 silver badges61 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
3 Answers
Reset to default 4The 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:
You are defining the
dirtyFlag
on yourTask
function. But you are checking it on the view bound to the viewModel instance.You have to define the dirty flag after you loaded the data or you have to call
dirtyFlag().reset()
.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
版权声明:本文标题:javascript - How to create dirty flag functionality - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134448a2422307.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论