Edit functionality in form using knockout js

问题

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>

回答1:

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

回答2:

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/

回答3:

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.

来源：https://stackoverflow.com/questions/25176821/edit-functionality-in-form-using-knockout-js

标签

knockout.js

knockout-2.0