我正在尝试取消在页面编辑期间完成的更改.但每当我点击取消时,都会反映更新后的更改.如何在点击取消按钮时还原更改.任何有关这方面的帮助都会非常有用,因为我是淘汰赛的新手
https://jsfiddle.net/tan2dgsa/
https://jsfiddle.net/tan2dgsa/
// viewmodel.js
var viewmodel = {
articles: [{
id: 1,title: "KnockOut Templating",content: "Content for Knockout goes here."
},{
id: 2,title: "SharePoint 2013 REST API",content: "Content for SharePoint."
},{
id: 3,title: "Knockout with SharePoint",content: "Content for knockout and SharePoint."
}],selectedTemplate: ko.observable("readOnly"),selectedMode: ko.observable(),};
viewmodel.currentTemplate = function (tbl) {
return tbl === this.selectedMode() ? 'editMode' : this.selectedTemplate();
}.bind(viewmodel);
viewmodel.reset = function (t) {
this.selectedMode("editMode");
};
ko.applyBindings(viewmodel);
解决方法
你问一个相当广泛的问题,或者事实是一个事实：
Create rollback functionality on KnockoutJS based edit forms
这背后的问题是：在KnockoutJS中这样做的惯用方法是什么？答案是：没有.你需要自己写点东西.
任何解决方案背后的基本思想都是相同的：在编辑之前保存原始数据的副本,这样您就可以在取消时恢复它.
这有两个好方法：
>使用库,例如ko.editables正是为此目的而设计的.
>自己动手吧.实际上并不难：在初始化时将模型保存在视图模型后面,并在“保存”时保存,并在“取消”上重用initialize方法.
以下是后者的一些示例代码：
var dummyItem = { id: 42,name: "John doe" };
function Itemviewmodel(data) {
var self = this,currentDto = data;
self.id = ko.observable();
self.name = ko.observable();
self.isInEditMode = ko.observable(false);
self.reset = function() {
self.id(currentDto.id);
self.name(currentDto.name);
self.isInEditMode(false);
};
self.saveState = function() {
currentDto = {
id: self.id(),name: self.name()
};
self.isInEditMode(false);
};
self.reset();
}
function Rootviewmodel() {
var self = this;
self.items = ko.observableArray([new Itemviewmodel(dummyItem)]);
self.startEdit = function(item) { item.isInEditMode(true); };
self.save = function(item) { item.saveState(); };
self.cancel = function(item) { item.reset(); };
}
ko.applyBindings(new Rootviewmodel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<ul data-bind="foreach: items">
<li>
<span data-bind="text: id"></span>
<span data-bind="text: name"></span>
<input data-bind="textInput: name,visible: isInEditMode">
<button data-bind="visible: !isInEditMode(),click: $root.startEdit">edit</button>
<button data-bind="visible: isInEditMode,click: $root.save">save</button>
<button data-bind="visible: isInEditMode,click: $root.cancel">cancel</button>
</li>
</ul>
您可能应该尝试为您自己的上下文实现这两个选项之一.如果您遇到特定问题,我建议您回答具体问题.