使用敲除js形式编辑功能 [英] Edit functionality in form using knockout js
本文介绍了使用敲除js形式编辑功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用淘汰赛js处理表单，我必须执行CRUD操作.除了更新(编辑)之外，我能够做所有其他事情.我要单击编辑"，将打开与单击添加人"相同的表单，但带有人"的值.这是我的代码
Hi i am working on a form using knockout js i have to perform CRUD operation. Out of these i am able to do all except update(edit). I want on click of edit same form will open as open on click on addperson but with the values of person. here is my code
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<a href="#" data-bind="click:addFields">ADDPerson</a>
<a href="#" data-bind="click:resetPerson">Reset</a>
<div data-bind="foreach:fields,visible:show">
<div data-bind="text:firstName"></div>
<div data-bind="text:lastName"></div>
<a href="#" data-bind="click:$root.remove">Remove</a>
<a href="#" data-bind="click:$root.edit" >edit</a>
</div>
<form data-bind="visible:showfields">
First Name:
<input data-bind="value:formFirstName"/>
Last Name:
<input data-bind="value:formLastName"/>
<a href="#" data-bind="click:addPerson">ADD</a>
</form>
<body>
<script>
function person(firstName, lastName) {
var self = this;
self.firstName = ko.observable(firstName);
self.lastName = ko.observable(lastName);
}
function personForm(formFirstName, formFirstName) {
var self = this;
self.formFirstName = ko.observable("david");
self.formLastName = ko.observable("rock");
}
function personViewModel() {
var self = this;
self.formFirstName = ko.observable("add");
self.formLastName = ko.observable("Value");
self.show = ko.observable(true);
self.showfields = ko.observable(false);
self.fields = ko.observableArray([
new person("paul", "kerry"),
new person("john", "cena")
]);
self.addFields = function() {
self.show(false);
self.showfields(true);
};
self.addPerson = function() {
self.fields.push(new person(self.formFirstName(), self.formLastName()));
self.show(true);
self.showfields(false);
}
self.resetPerson = function() {
self.fields.removeAll();
self.fields.push(new person("john", "cena"));
self.fields.push(new person("abc", "def"));
}
self.remove = function(person) {
self.fields.remove(person);
}
}
ko.applyBindings(new personViewModel());
</script>
</html>
推荐答案
这是一个完整的解决方案.我做了一些修改.
Here is a complete solution. i have made some modifications.
查看
<a href="#" data-bind="click:addFields">ADDPerson</a>
<br>
<a href="#" data-bind="click:resetPerson">Reset</a>
<br>
<div data-bind="foreach:fields,visible:show">
<div data-bind="text:firstName"></div>
<div data-bind="text:lastName"></div>
<a href="#" data-bind="click:$root.remove">Remove</a>
<a href="#" data-bind="click:$root.edit">edit</a>
</div>
<form data-bind="visible:showfields">First Name:
<input data-bind="value:formFirstName" />Last Name:
<input data-bind="value:formLastName" />
<a href="#" data-bind="click:addPerson,text:actionTitle"></a>
</form>
型号
function person(firstName, lastName) {
var self = this;
self.firstName = ko.observable(firstName);
self.lastName = ko.observable(lastName);
}
function personViewModel() {
var self = this;
self.formFirstName = ko.observable("add");
self.formLastName = ko.observable("Value");
self.show = ko.observable(true);
self.showfields = ko.observable(false);
self.flag = ko.observable(false)
self.actionTitle = ko.observable('Add')
self.editPerson = ko.observable()
self.fields = ko.observableArray([
new person("paul", "kerry"),
new person("john", "cena")]);
self.addFields = function () {
self.show(false);
self.showfields(true);
self.flag(false)
self.actionTitle('Add')
};
self.addPerson = function () {
if (self.flag()) {
self.editPerson().firstName(self.formFirstName())
self.editPerson().lastName(self.formLastName())
self.flag(false)
} else {
self.fields.push(new person(self.formFirstName(), self.formLastName()));
}
self.show(true);
self.showfields(false);
}
self.resetPerson = function () {
self.fields.removeAll();
self.fields.push(new person("karan", "bhardwaj"));
self.fields.push(new person("dipankar", "gupta"));
}
self.edit = function (person) {
self.editPerson(person)
self.formFirstName(person.firstName())
self.formLastName(person.lastName())
self.showfields(true)
self.flag(true)
self.actionTitle('Edit')
}
self.remove = function (person) {
self.fields.remove(person);
}
}
ko.applyBindings(new personViewModel());
这篇关于使用敲除js形式编辑功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
