Question

在以下事件处理程序中处理Kendo DatePicker的已更改事件：

修改
这是HTML：

<div class="toolbar-group">
    <div class="toolbar-item">
        <div class="toolbar-label">Approval Status: </div>
        <div class="toolbar-value">
            <input type="text" data-bind="value:approvalStatus" readonly />
        </div>
    </div>
</div>

<div class="toolbar-group">
    <div class="toolbar-item">
        <div class="toolbar-label">Authorised Date: </div>
        <div class="toolbar-value">
            <input data-bind="kendoDatePicker: { value: authorisedDate, change: authorisedDateChanged }" placeholder="select authorised date" id="authorisedDate" />
        </div>
    </div>
</div>

<div id="tradeGrid" data-bind="kendoGrid: { data: tradeRecords, filterable: true, pageable: { pageSize: 10 }}"></div>

修改
这是TypeScript / Javascript：

export class TradeAdminViewModel {

    public approvalStatus: KnockoutObservable<string> = ko.observable("");

    public authorisedDate = ko.observable(new Date());

    public tradeRecords: any;

    constructor() {

        //make sure no records have been loaded yet - which shouldn't be possible
        if (this.tradeRecords == null) {

            //get the default records
            this.getTradeRecordsDefault();

        }    
    }

    authorisedDateChanged(e): void {
        console.log("date changed to: " + this.value());
        console.log("is equal: " + (e.sender === this));
    }

    getTradeRecordsDefault(): void {
        //get the root path for ajax calls
        var url: string = "/GetTradeRecordsDefault";

        //load the trade records
        $.getJSON(url)

            .done((result) => {

                //extract the records
                this.tradeRecords = ko.observableArray(result.TradeRecords);

                //add the approval status
                this.approvalStatus(result.TradeStatus);

                //apply all knockout bindings
                ko.applyBindings(this);
            })
            .fail((result) => {

                console.log("fail: " + result);

            });
    }
}

对于 getTradeRecordsDefault 事件，第一行将写出 true ，第二行将写出所选的新日期。

这很好，但没有必要同时拥有这个＆＃39;和e.sender我们可以使用e.sender。改变这个＆＃39;的背景。在TypeScript / Knockout / Kendo环境中导致问题，我需要从上面的处理程序更新ViewModel的成员，该处理程序位于同一视图模型中。

有没有办法阻止剑道改变＆＃39; 这个＆＃39;

的背景？

Answer 1

有没有办法阻止剑道改变'this'的上下文？

范围由JavaScript（不是Kendo或TypeScript）决定。在类上调用方法时，this的范围将是类。当您将方法作为事件的一部分调用时，this的范围将是事件。

注册事件处理程序时，您可以preserve the context of this using an arrow function。

例如，如果您有以下事件：

window.setTimeout(example.showText, 50);

你可以使用以下方法保留showText方法的范围（即使它成为类，而不是事件）：

window.setTimeout(() => example.showText(), 50);

如果您希望事件和保留范围，您可以使用以下内容（我使用了onclick事件来说明它）：

document.body.onclick = (e) => example.showText(<HTMLElement>e.target);

您甚至可以使用匿名函数访问this的两个不同上下文：

document.body.onclick = function() {
    // this on the line below is the event.
    // this inside the showText method is the class.
    example.showText(this);
};

阻止剑道改变这个＆＃39;这个＆＃39;的背景。在事件处理程序中

1 个答案: