从 Knockoutjs 中的可观察数组中删除项目

Removing item from observablearray in Knockoutjs

本文关键字：数组 删除项目 观察 Knockoutjs      更新时间：2023-09-26

我正在尝试学习Knockoutjs，并且在向可观察数组添加和删除对象时遇到了一些问题。

我

有以下视图模型，其中我从 Web 服务获取一些数据并填充一些 html。这工作正常。但是不起作用的是从可观察数组中删除项目，因为点击事件似乎没有调用 removeEmployee。

function EmployeeViewModel(){
    var self=this;
    self.employees=ko.observableArray();
    self.removeEmployee = function(item) {
        self.employees.remove(item);
    };
}
function success(data) {
    EmployeeViewModel.employees=ko.mapping.fromJS(data);
    ko.applyBindings(EmployeeViewModel);    
};
ApiCall({
    data: {
      [get data]
    },
    onSuccess: function(data){success(data.result)} 
});

和以下 html：

<div data-bind="foreach: employees">   
    <h2>Hello, <span data-bind="text: full_name"> </span>!</h2>  
    <button data-bind="click: $parent.removeEmployee">Remove</button>
 </div>

我尝试在这里设置一个 jsfiddle：http://jsfiddle.net/8yX5M/其中删除项目确实有效。不同之处在于，在jsfiddle中，项目不是从外部源获取的，我使用removeEmployee而不是$parent.removeEmployee。

任何想法为什么非 jsfiddle 版本不起作用？

谢谢托马斯

因为您的成功函数没有设置 observableArray 的值，所以它正在重置对象的定义 - 

function success(data) {
    EmployeeViewModel.employees(ko.mapping.fromJS(data));
    ko.applyBindings(EmployeeViewModel);    
};
使用

EmployeeViewModel.Employees 上的 setter 函数，方法是使用 （） 并传入一个值。

事实证明，

这是因为我在映射数据之前没有将 EmployeeViewModel 实例化为全局变量。

工作代码是

'use strict';
var employeeViewModel=new EmployeeModel();
function EmployeeModel(){
    var self=this;
    self.employees=ko.observableArray();
self.removeEmployee = function(item) {
    self.employees.remove(item);
    };
}
function getEmployeesSuccess(data,controlIds) {
    employeeViewModel.employees=ko.mapping.fromJS(data);
    var _i=0;
    for (var _total=controlIds.length; _i < _total; _i++) {
        ko.applyBindings(employeeViewModel,$("#"+controlIds[_i])[0]);    
    }
};
/* Databinds employeedata to an array of controls */
/* controlIds=Array of controls*/
function DataBindEmployees(controlIds)
{
ApiCall({
    data: {
      [get data]
    },
    onSuccess: function(data){getEmployeesSuccess(data.result, controlIds)} });
};
相关文章：