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

kb5ga3dv  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(174)

我试图使用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());
tct7dpnv

tct7dpnv1#

您的代码中存在多个问题。第一个问题是从PayrollViewModel.add()调用的new Employee()将引用模型内部定义的Employee对象(不是构造函数),而不是您期望它引用的function Employee(id, name) {}
第二个问题是每次调用PayrollViewModel.add()时都要重新定义PayrollViewModel.Employees。这会破坏对DOM的敲除绑定--绑定后永远不要重新定义(重写)可观测量,只能通过observable(newValue)或使用.push()方法为可观测数组赋值em。因此,在本例中添加新记录的正确方法是self.Employees.push(newItem)
参见以下工作示例:
第一个
除了上面的问题,你的问题与editupdate方法,这是没有绑定到任何东西。

p4tfgftt

p4tfgftt2#

HTML更改

我稍微修改了一下HTML,在input和submit元素周围包了一个form元素。正如你所看到的,form元素有一个附加到add()函数的数据绑定。希望这能让你更清楚在提交每个输入字段时哪个函数将被触发。

JavaScript语言

我已经创建了两个视图模型,即one of the underlying concepts of Knockout.js.
一个视图模型是包含正在创建的用户的配置函数,另一个视图模型处理在UI中添加雇员。
理想情况下,addEmployeeVM函数应该是一个处理删除、编辑和添加的通用函数,但出于学习目的,我创建了一个只添加用户的函数。
我没有像其他人那样使用“self”这个词,只是因为我认为在每个视图模型中使用不同的术语有助于识别哪个视图模型属于哪个视图模型。
我所做的是扩展employeeConfigVM中的属性,以便可以在addEmployeeVM中访问这些属性。我的想法是尝试并继续像这样构建应用程序,在不同的文件中为应用程序的不同功能/部分创建视图模型,以便您可以轻松地扩展应用程序。
查看激活knockout以了解如何绑定到页面的不同部分,因为您可能只想为非常小的部分提供功能,而不想为页面的其余部分提供功能。
第一个

相关问题