为什么这个绑定的敲除元素变得未定义？

Question

使用 TypeScript 和 Knockout 构建页面。当页面加载时，viewmodel 会创建一个值并将其分配给 "vehicles" 个对象数组。

vehicles: KnockoutObservableArray<Vehicle>;

constructor() {
    // uses and API to fetch data into a "vehicleData" array
    this.vehicles = ko.observableArray(vehicleData);
}

并且在页面本身中，它绑定到一个包含 "remove" 按钮的元素：

<div data-bind="foreach: vehicles">
    <div data-bind="text: model"></div>
    <button data-bind="click: $parent.removeVehicle">Remove</button>
</div>

这一切都很好。我不明白的是调用 removeVehicles 时会发生什么。这是：

removeVehicle(vehicle): void {
    this.vehicles.remove(vehicle);
}

它按预期传入参数，但是当它尝试删除时，它声称 "vehicles" 不再存在。

Uncaught TypeError: Cannot read property 'remove' of undefined
    at Object.VehicleManagementViewModel.removeVehicle
    at HTMLButtonElement.<anonymous> (knockout-latest.js:99)

是什么导致数组变得未定义？当 HTML 元素正确绑定到它时，它怎么会是未定义的呢？

Answer 1

我手头没有 knockout/typescript 设置来尝试这个，但我会猜测 "this" 已经失去了对父 class 的引用函数。

如果你看一下knockout主页上的例子，你会发现他们使用"self"变量来存储"this"引用。也许模板没有调用具有正确 "this" 值的函数。使用 console.log 查看 "this" 值是多少。

<ul data-bind="foreach: places">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>

 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

Answer 2

如果您以这种方式在视图模型中引用函数，this 将被 Knockout 覆盖。

您可以将视图模型中的函数定义为箭头函数。这样，this 将继续引用视图模型 class。

所以你可以改变：

removeVehicle(vehicle): void {
    this.vehicles.remove(vehicle);
}

收件人：

removeVehicle = (vehicle) => {
    this.vehicles.remove(vehicle);
}

为什么这个绑定的敲除元素变得未定义？

Why has this bound knockout element become undefined?

javascript

knockout-2.0

knockout.js

typescript