事件處理程序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>