Question

我一直在寻找为什么Kendo回调不能使用TypeScript但我找不到有用的东西。

所以我的问题是kendo如何使用类方法作为回调？例如：

    $("#ipt_tree").kendoTreeView(
    {
        dataSpriteCssClassField: "sprite",
        dataSource: data,
        template: "<span data-oid='#= item.oid#'>#= item.text#</span>",
        //change: this.Tree_Item_Selected,      //doens't get even called
        //change: ( item: any ): void =>        //'this' is not 'this' of the class
        //{
        //  this.Tree_Item_Selected( item );
        //}
        change: function( item: any )           //using compiler this variable
        {
            _this.Tree_Item_Selected( item );
        }
    });

我发现的唯一解决方案是使用编译器生成的_this变量。

现在对于jquery，方法回调可以很好地工作。

    $( "#ipb_aci_button_edit" ).show().on( "click", this.Info_OnClick_Edit );
    private Info_OnClick_Edit = (): void =>
    {
    //'this' is correct
    }

Answer 1

如果使用当前版本的TypeScript（1.0RC），则创建一个类：

class Demo {
    private Tree_Item_Selected(item:any) { }

    public Create_Tree(data:any) {
        var kendoSettings = {
            dataSpriteCssClassField: "sprite",
            dataSource: data,
            template: "<span>#= item.text#</span>",
            change: ( item: any ): void =>        
            {
                this.Tree_Item_Selected( item );
            },
            change2: function( item: any )        
            {
                _this.Tree_Item_Selected( item );
            }                                   
        };              
    }   
}

并将其编译为JavaScript，示例代码中的函数change和change2都生成完全相同的代码块：

change: function (item) {
    _this.Tree_Item_Selected(item);
},
change2: function (item) {
    _this.Tree_Item_Selected(item);
}

唯一的区别是第二个产生的错误_this未找到。

在第二个示例中，它正常工作，因为它正确捕获了this。但是，您可能需要考虑不同的语法：

$( "#ipb_aci_button_edit" ).show().on( "click",
      (e:JQueryEventObject) => { this.Handle_Info_OnClick_Edit(e) } );

private Handle_Info_OnClick_Edit(e:JQueryEventObject): void 
{
    // 'this' is correct as it was captured by the event handler code
}

TypeScript kendoTreeView更改/选择类方法回调

1 个答案: