Edit functionality in form using knockout js

2019-09-10 12:29发布

站内问答 / 前沿技术
494 3 5

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>

3条回答
霸刀☆藐视天下
2楼-- · 2019-09-10 13:18

Here's how you can update existing model :

Create new observable : 

self.editForm = ko.observable(); //This will hold selected person object which you want to edit

Create new function for edit :

self.edit = function(person){

    self.editForm(person); //populate selected object to edit in edit form

}

Wire up HTML : 

<form data-bind="visible:showEdit, with: editForm">
    First Name: 
    <input data-bind="value:firstName"/>
    Last Name:
    <input data-bind="value:lastName"/> 
</form>

Why create new observable? -

Answer - All the edits you make will be updated in realtime, you won't have to hit UPDATE like button :-)

I hope that clears..

Updated demo with single form : http://jsfiddle.net/rahulrulez/7f7hsj8w/2/

查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2019-09-10 13:18

If you want to edit the form in place. Kind of like asp.net webform style.

The simple way is to has the input disabled initially. Then have the edit button to enable the inputs. Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2019-09-10 13:20

Here is a complete solution. i have made some modifications.

View 

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

Model

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

Fiddle Demo

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)