Question

我正在尝试学习Knockoutjs，我在向observablearray添加和删除对象时遇到了一些问题。

我有以下viewmodel，我从webservice中获取一些数据并填充一些html。这很好用。但是什么不起作用是从observablearray中删除项目，因为click-event似乎没有调用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版本不起作用的任何想法？

感谢托马斯

Answer 1

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

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

使用（）并传入一个值，在EmployeeViewModel.employees上使用setter函数。

Answer 2

原来是因为我在映射数据之前没有将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)} });
};

从Knockoutjs中的observablearray中删除项目

2 个答案: