使用Knockout JS进行Crud操作如何编辑和更新特定数据

如何解决使用Knockout JS进行Crud操作如何编辑和更新特定数据

这是我的viewmodel： 它包含用于在单击添加按钮时显示面板的功能，以及用于读取，添加和删除数据的StudentData功能。

    <script type="text/javascript">
    $(document).ready(function () {
        $("#panelInfo").hide();
    });
    function StudentData(fullName,email,phone,age,address) {
        var self = this;
        self.fullName = ko.observable(fullName);
        self.email = ko.observable(email);
        self.phone = ko.observable(phone);
        self.age = ko.observable(age);
        self.address = ko.observable(address);
    }

    function addStudent() {
        $("#panelInfo").show();
    }

    function studentviewmodel() {
        var self = this;
        self.fullName = ko.observable("");
        self.email = ko.observable("");
        self.phone = ko.observable("");
        self.age = ko.observable("");
        self.address = ko.observable("");

        self.studentList = ko.observableArray([
            {
                fullName: "xyz",email: "[e-mail]",phone: "6767777",age: "21",address: "ajckjackjhka"
            }
        ]);
        self.RemoveList = function (data) {
            self.studentList.remove(data);
        }

        self.EditList = function(data) {
            $("#panelInfo").show();
            $("#updateButton").html("Update");
        }

        self.addStudentData = function () {
            self.studentList.push({
                fullName: self.fullName,email: self.email,phone: self.phone,age: self.age,address: self.address
            });
            $("#panelInfo").hide();
        }
    }

    ko.applyBindings(studentviewmodel);
</script>

这是View： 该视图包含用于显示数据的表格和用于将数据输入到可观察数组的表格

    <div id="studentTable" class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2 class="text-center">Students Record</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <table class="table table-bordered table-condensed table-striped">
                <thead>
                    <tr>
                        <th>Student Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Age</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: studentList">
                    <tr>
                        <td data-bind="text: fullName"></td>
                        <td data-bind="text: email"></td>
                        <td data-bind="text: phone"></td>
                        <td data-bind="text: age"></td>
                        <td data-bind="text: address"></td>
                        <td>
                            <button class="btn-sm btn-block btn btn-primary" data-bind="click: EditList">Edit</button>
                            <button class="btn-sm btn-block btn btn-primary" data-bind="click: RemoveList">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div> <button class="btn btn-primary" onclick="addStudent()">Add</button></div>
    <div class="row" id="panelInfo">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Student information
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="studentName">Student Name</label>
                        <input type="text" data-bind="value: fullName" id="studentName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentEmail">Email</label>
                        <input type="text" data-bind="value: email" id="studentEmail" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentPhone">Phone</label>
                        <input type="url" data-bind="value: phone" id="studentPhone" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentAge">Age</label>
                        <input type="url" data-bind="value: age" id="studentAge" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentAddress">Address</label>
                        <input type="url" data-bind="value: address" id="studentAddress" class="form-control" />
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-xs-12">
                            <button type="button" data-bind="click: addStudentData" id="updateButton" class="btn btn-primary">
                                Add
                            </button>
                            <button type="button" id="cancelButton" class="btn btn-primary" onclick="cancelClick();">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请完成用于编辑和更新此数据的代码。