javascript - 为什么这个绑定的剔除元素变得未定义?
问题描述
使用 TypeScript 和 Knockout 构建页面。当页面加载时,视图模型创建并分配一个值给“车辆”对象数组。
vehicles: KnockoutObservableArray<Vehicle>;
constructor() {
// uses and API to fetch data into a "vehicleData" array
this.vehicles = ko.observableArray(vehicleData);
}
在页面本身中,它绑定到一个包含“删除”按钮的元素:
<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);
}
它按预期传递参数,但是当它试图删除时,它声称“车辆”不再存在。
Uncaught TypeError: Cannot read property 'remove' of undefined
at Object.VehicleManagementViewModel.removeVehicle
at HTMLButtonElement.<anonymous> (knockout-latest.js:99)
是什么导致数组变得未定义?当 HTML 元素正确绑定到它时,它怎么可能是未定义的?
解决方案
我手头没有敲除/打字稿设置来尝试这个,但我会猜测并说“this”已经失去了对函数中父类的引用。
如果您查看淘汰赛主页上的示例,您可以看到他们使用“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>
推荐阅读
- php - 如何在 yii2 的 where 条件(in 子句)中使用变量
- jquery - 如何为带有子菜单的菜单项添加显示延迟?
- c++ - C ++从另一个类访问类变量
- css - 我正在尝试创建一个不环绕的偏离中心的径向渐变背景
- puppeteer - 如何使用 Puppeteer 进行 API 测试
- matlab - 在 Matlab 中由用户从输入范围生成素数列表。条件是忽略负数,如果在列表中则为 0 和 1
- html - 发出请求,但 MongoDB 中仅显示对象 _id
- flutter - 如何将动态表添加到 Flutter
- java - 为什么要为不可变集合和映射的每个 JVM 运行不同的迭代顺序?
- forms - 德尔福;工作示例 StringToComponent、ComponenttoString