事件处理程序WinJS.UI.Repeater项目绑定到对象方法

Question

我目前正在尝试绑定onchange事件<select>到一个事件处理程序里面，这是一个对象方法（用TypeScript编写的JavaScript类），如下所示：

HTML：

<div id="readerTemplate" data-win-control="WinJS.Binding.Template"> 
 
    <div> 
 
    <select class="win-dropdown" 
 
      data-win-control="WinJS.UI.Repeater" 
 
      data-win-options="{data: versions}" 
 
      data-win-bind="value: version; onchange: versionChangeHandler"> 
 
     <option data-win-bind="value: fileName; textContent: versionName"> 
 
     </option> 
 
    </select> 
 
    <div class="win-type-title" data-win-bind="textContent: version"></div> 
 
    </div> 
 
</div>

JS /打字稿：

loadTabsUI(pivot: WinJS.UI.Pivot) { 
 
    for (let tab of this.tabs) { 
 
    var tabDiv = document.createElement("div"); 
 
    var pivotItemDiv = document.createElement("div"); 
 
    var pivotItem = new WinJS.UI.PivotItem(pivotItemDiv); 
 
    pivotItemDiv.setAttribute('data-win-bind', 'winControl.header: title'); 
 
    var rptrDiv = document.createElement("div"); 
 
    var rptr = new WinJS.UI.Repeater(rptrDiv, { "data": tab.readers, "template": document.getElementById("readerTemplate").winControl }); 
 
    pivotItem.contentElement.appendChild(rptrDiv); 
 

 
    pivot.items.push(pivotItem); 
 

 
    WinJS.Binding.processAll(pivotItemDiv, tab); 
 
    } 
 
}

行，其中结合正在发生：
var rptr = new WinJS.UI.Repeater(rptrDiv, { "data": tab.readers, "template": document.getElementById("readerTemplate").winControl });

阅读器类方法：

class Reader { 
 
    ... 
 
    ... 
 
    versionChangeHandler(evt: UIEvent): void { 
 
    // goal is to execute the following line: 
 
    this.setVersionAsync((evt.target as any).value); 
 
    } 
 
    ... 
 
    ... 
 
}

当<select>的选择改变时，versionChangeHandler不会被调用。但是，问题在于我无法在函数内部访问正确的this，这阻止了我在正确的对象实例上运行setVersionAsync，这是WinJS.UI.Repeater所使用的对象实例（在从JS先前）填充/绑定readerTemplate。

解决此问题的任何想法？ （我打电话这个WinJS.Utilities.markSupportedForProcessing(this.versionChangeHandler);在阅读器类的构造函数，否则我打同一个结合例外）。

谢谢！

Answer 1

但是，问题是我无法访问正确的这个函数内部。

这是因为上下文已经改变。您可以使用下面的代码来解决这个问题：

class Reader { 
    public handlerProxy: any; 

    constructor() { 
    this.handlerProxy = (evt: UIEvent) => { this.versionChangeHandler(evt, this); } 
    } 
    ... 
    ... 
    versionChangeHandler(evt: UIEvent,that): void { 
    // goal is to execute the following line: 
    that.setVersionAsync((evt.target as any).value); 
    } 
    ... 
    ... 
} 

而在你的HTML变化versionChangeHandler到handlerProxy：

<div id="readerTemplate" data-win-control="WinJS.Binding.Template"> 
<div> 
<select class="win-dropdown" 
     data-win-control="WinJS.UI.Repeater" 
     data-win-options="{data: versions}" 
     <!--here change versionChangeHandler to handlerProxy.--> 
     data-win-bind="value: version; onchange: handlerProxy"> 
    <option data-win-bind="value: fileName; textContent: versionName"> 
    </option> 
</select> 
<div class="win-type-title" data-win-bind="textContent: version"></div>