TypeScript 和 Knockout 绑定到this问题需要 lambda 函数

发布于11月08日

我一直在使用TypeScript和KnockoutJS创建一个htmlHelper函数来编辑邮箱列表.

邮件列表是一个名为emails的淘汰列表，我有一个针对每个邮件的链接来删除它们.这是HTML片段:

<ul data-bind="foreach: emails" >
    <li>
        <a href="#" data-bind="click: $parent.deleteItem">Delete</a>
        &nbsp;<span data-bind="text: $data"></span>
    </li>
</ul>

删除链接绑定到$parent.deleteItem这是viewmodel中的一种方法:

// remove item
public deleteItem(emailToDelete: string) {
    // remove item from list
    this.emails.remove(emailToDelete);
}

在执行deleteItem方法之前，所有这些都有效.调用此方法时，该方法中的"this"是数组中的项，而不是视图模型.因此.邮箱是空引用，并且失败.

我知道TypeScript支持Lambda语法，但我找不到正确的方法来编写它(很少有例子).

或者我可以采取不同的方法吗？

推荐答案

通过在类构造函数中声明方法体，可以获得"this"的正确闭包

class VM {
    public deleteItem: (emailToDelete: string) => void;

    constructor() {
        this.deleteItem = (emailToDelete: string) => {
            // 'this' will be pointing to 'this' from constructor
            // no matter from where this method will be called
            this.emails.remove(emailToDelete);
        }
    }        
}

更新:

从Typescript版本0.9.1开始，似乎可以通过使用lambda字段初始值设定项来实现相同的结果:

class VM {
    public deleteItem = (emailToDelete: string) => {
        this.emails.remove(emailToDelete);
    }        
}

Typescript相关问答推荐

Typescript自定义键映射

ReturnType此索引方法与点表示法之间的差异

从接口创建类型安全的嵌套 struct

带有微前端的动态React路由问题

在React中实现具有独立页面的嵌套路径的最佳实践是什么？

打字类型保护递归判断

适当限制泛型函数中的记录

如何使默认导出与CommonJS兼容

获取一个TypeScrip对象，并将每个属性转换为独立对象的联合

Angular 17子路由

如何从输入中删除值0

从类型脚本中元组的尾部获取第n个类型

map 未显示控制台未显示任何错误@reaction-google-map/api

如何静态键入返回数组1到n的函数

在TypeScript中，如何通过一系列过滤器缩小类型？

基于泛型的类型脚本修改类型

为什么看起来相似的代码在打字时会产生不同的错误？

Typescript 是否可以区分泛型参数 void？

在Typescript 无法正常工作的 Three.js 中更新动画中的 GLSL 统一变量

对于通过 Axios 获取的数据数组，属性map在类型never上不存在

实用课程推荐