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

Question

我正在尝试使用 knockout.js 创建员工表。我有一个为表循环的数组，我有编辑和删除的功能，但我想创建一个文本输入框，用于将员工添加到数组，然后用新员工的信息更新表。我已经尝试了所有我知道的方法，但由于我是 knockout 和 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>

Javascript:

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

Answer 1

您的代码中存在不止一个问题。第一，从 PayrollViewModel.add() 调用的 new Employee() 将引用在模型中定义的 Employee 对象(而不是作为构造函数)而不是您希望它引用的 function Employee(id, name) {}。

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

请参阅下面的工作示例:

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

	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 () {
		this.Employees.push({
			Id: self.Employees().length+1,
			Name: self.nameToAdd()
		});
		this.nameToAdd("");
	};
}

ko.applyBindings(new PayrollViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<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:$root.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>

除了上面的问题之外，edit 和 update 方法都没有绑定(bind)到任何东西。