Javascript Knockout.js在表中添加和更新数组

我正在尝试使用knockout.js创建一个员工表。我有一个为表循环的数组，我有可以编辑和删除的函数，但我想创建一个文本输入框，用于将员工添加到数组中，然后用新员工的信息更新表。我已经尝试了所有我知道如何做的事情，但是因为我是敲除和javascript的初学者，所以我真的不知道如何做到这一点

HTML:

<div class="form-group row">
    <label for="txtEmployee" class="col-2 col-form-label">Name: </label>
    <div class="col-6">
        <input type="text"
               data-bind="value: nameToAdd, valueUpdate: 'afterkeydown'"
               class="form-control"
               id="txtName" />
    </div>
    <div class="col-4">
        <a href="#" data-bind="click: $root.add" class="btn btn-primary">Add</a>
    </div>
</div>

<table class="table table-dark table-striped table-hover">
    <thead>
        <tr>
            <th>EmployeeId</th>
            <th>Name</th>
            <th>Functions</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: Name"></td>
            <td>
                <span>
                    <a href="#" class="btn btn-success" data-bind="click: $root.edit">
                        <i class="fa fa-pencil fa-lg"> </i> EDIT
                    </a>
                </span>
                |
                <span>
                    <a href="#" class="btn btn-danger" data-bind="click: $root.remove">
                        <i class="fa fa-trash-o fa-lg"> </i> DELETE
                    </a>
                </span>
            </td>
        </tr>
    </tbody>
</table>

function Employee(id, name) {
     this.Id = id;
     this.Name = name;
};

var employeeList = [
     new Employee(1, "Justin"),
     new Employee(2, "John"),
     new Employee(3, "Sarah"),
     new Employee(4, "Tyler"),
     new Employee(5, "Mason")
];

function PayrollViewModel() {
     var self = this;
     self.nameToAdd = ko.observable("");
     self.Id = ko.observable("");
     self.Name = ko.observable("");

     var Employee = {
        Id: self.Id,
        Name: self.Name
     };

     self.Employee = ko.observable();
     self.Employees = ko.observableArray(employeeList);

     self.edit = function(Employee) {
        self.Employee(Employee);
     };

     self.remove = function(Employee) {
        self.Employees.remove(Employee);
     };

     self.cancel = function() {
        self.Employee(null);
     };

     self.update = function() {
        var l_employee = self.Employee();
        self.Employees.remove(self.Employee());
        self.Employees.push(l_employee);
     };

     self.add = function() {
        var random = Math.floor((Math.random() * 100) + 1);
        this.Employees = [
           new Employee(random, nameToAdd)
        ]
        this.nameToAdd("");
     };
};

ko.applyBindings(new PayrollViewModel());

---

代码中存在多个问题。 第一是从

PayrollViewModel调用
new Employee（）
。add（）

将引用在模型内部定义的

Employee

对象（而不是构造函数），而不是期望它引用的

函数Employee（id，name）{}

第二个问题是，每次调用

PayrollViewModel.add（）

，您都在重新定义

PayrollViewModel.Employees

。这打破了对DOM的敲除绑定-绑定后不要重新定义（重写）可观察对象，只能通过

可观察（newValue）

或使用

.push（）

方法为可观察数组分配em。因此，在您的案例中添加新记录的正确方法是

self.Employees.push（newItem）

请参见下面的工作示例：

职能员工（id、姓名）{
这个.Id=Id；
this.Name=Name；
};
var employeeList=[
新员工（1名，“贾斯汀”），
新员工（2，“约翰”），
新员工（3名，“Sarah”），
新员工（4名，“泰勒”），
新员工（5名，“梅森”）
];
函数PayrollViewModel（）{
var self=这个；
self.nameToAdd=ko.可观察（“”）；
self.Id=ko.可观察（“”）；
self.Name=ko.observable（“”）；
self.Employee=ko.observable（）；
self.Employees=ko.observearray（员工列表）；
self.edit=功能（员工）{
自雇员工（员工）；
};
self.remove=功能（员工）{
self.Employees.remove（员工）；
};
self.cancel=函数（）{
self.Employee（空）；
};
self.update=函数（）{
var l_employee=self.employee（）；
self.Employee.remove（self.Employee（））；
self.Employees.push（l_员工）；
};
self.add=函数（）{
这个，员工，推({
Id:self.Employees（）.length+1，
名称：self.nameToAdd（）
});
此。名称添加（“”）；
};
}
ko.applyBindings（新的PayrollViewModel（））

姓名：
雇员ID
名称
功能
|
您的代码中存在多个问题。
第一是从
PayrollViewModel调用
new Employee（）
。add（）
将引用在模型内部定义的
Employee
对象（而不是构造函数），而不是期望它引用的
函数Employee（id，name）{}

第二个问题是，每次调用
PayrollViewModel.add（）
，您都在重新定义
PayrollViewModel.Employees
。这打破了对DOM的敲除绑定-绑定后不要重新定义（重写）可观察对象，只能通过
可观察（newValue）
或使用
.push（）
方法为可观察数组分配em。因此，在您的案例中添加新记录的正确方法是
self.Employees.push（newItem）

请参见下面的工作示例：


职能员工（id、姓名）{
这个.Id=Id；
this.Name=Name；
};
var employeeList=[
新员工（1名，“贾斯汀”），
新员工（2，“约翰”），
新员工（3名，“Sarah”），
新员工（4名，“泰勒”），
新员工（5名，“梅森”）
];
函数PayrollViewModel（）{
var self=这个；
self.nameToAdd=ko.可观察（“”）；
self.Id=ko.可观察（“”）；
self.Name=ko.observable（“”）；
self.Employee=ko.observable（）；
self.Employees=ko.observearray（员工列表）；
self.edit=功能（员工）{
自雇员工（员工）；
};
self.remove=功能（员工）{
self.Employees.remove（员工）；
};
self.cancel=函数（）{
self.Employee（空）；
};
self.update=函数（）{
var l_employee=self.employee（）；
self.Employee.remove（self.Employee（））；
self.Employees.push（l_员工）；
};
self.add=函数（）{
这个，员工，推({
Id:self.Employees（）.length+1，
名称：self.nameToAdd（）
});
此。名称添加（“”）；
};
}
ko.applyBindings（新的PayrollViewModel（））

姓名：
雇员ID
名称
功能
|
HTML更改

我稍微修改了您的HTML，并在input和submit元素周围包装了一个表单元素。如您所见，表单元素将数据绑定附加到add（）函数。希望这能使提交每个输入字段时哪个函数将被激发的位置更加清晰

JavaScript

我创建了两个视图模型，分别是

一个视图模型是一个配置函数，包含正在创建的用户，另一个视图模型处理在UI中添加员工的问题

理想情况下，addEmployeeVM函数应该是一个处理删除、编辑和添加操作的通用函数，但出于学习目的，我创建它只是为了添加一个用户。您可以将其更改为包括其他方法

我没有像许多其他人那样使用“self”这个引用，只是因为我认为在每个视图模型中使用不同的术语可以帮助您确定哪个视图模型属于哪个视图模型

我所做的是扩展employeeConfigVM中的属性，以便可以在addEmployeeVM中访问它们。我们的想法是尝试并继续这样构建您的应用程序，在不同的文件中为应用程序的不同功能/部分创建视图模型，以便您可以轻松地扩展应用程序

查看以了解如何绑定到页面的不同部分，如