Event Handler Binding von WinJS.UI.Repeater Element zu Objekt Methode

Question

Ich bin derzeit versucht, die onchange Ereignis einer <select> zu einem Event-Handler in das ist eine Objektmethode (JavaScript-Klasse in TypeScript geschrieben) als so:

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/Typoskript:

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); 
 
    } 
 
}

Linie, wo Bindung stattfindet:
var rptr = new WinJS.UI.Repeater(rptrDiv, { "data": tab.readers, "template": document.getElementById("readerTemplate").winControl });

Reader-Klasse mit Methode:

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

Wenn die Auswahl des <select> geändert wird, wird die versionChangeHandler aufgerufen. Das Problem ist jedoch, dass ich nicht auf die korrekte this innerhalb der Funktion zugreifen kann, die mich daran hindert, setVersionAsync für die richtige Objektinstanz auszuführen, die die Objektinstanz ist, die von der WinJS.UI.Repeater (in der Bindung von der JS verwendet wurde) früher), um die readerTemplate zu füllen/zu binden.

Irgendwelche Ideen zur Lösung dieses Problems? (Ich rufe diese WinJS.Utilities.markSupportedForProcessing(this.versionChangeHandler); im Konstruktor der Reader-Klasse, da ich sonst eine Ausnahme mit der Bindung traf.)

Vielen Dank!

Answer 1

Allerdings ist das Problem, dass ich nicht in der Lage bin, auf das richtige innerhalb der Funktion zuzugreifen.

Es ist, weil der Kontext geändert hat. Sie können die folgenden Codes verwenden, um dieses Problem zu beheben:

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); 
    } 
    ... 
    ... 
} 

Und in Ihrem HTML-Änderung 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>