Aurelia ref bindenden Bereich unterschiedlich basierend auf Element?

Question

Ich bin verwirrt über den Umfang der ref Attribut/Bindung. Ich habe zwei HTML-Tabellen, die die gleiche ref="activeTable" haben und jede Tabelle hat mehrere Zeilen, die alle die gleiche ref="activeRow" haben.

Sehen Sie diese GistRun (Code unten kopiert).

Wenn ich auf die Bearbeiten-Schaltfläche einer Zeile klicke, wird der Verweis auf die angeklickte Zeile übergeben (unabhängig von der angeklickten Tabelle oder Zeile). Aber wenn ich auf eine Schaltfläche Hinzufügen der Tabelle klicken, wird der Verweis auf die Tabelle B immer wird in geben.

Warum ist ref für activeTable überschrieben werden, aber nicht activeRow?

Meine aktuelle Lösung ist ref="activeTableA" oder ref="activeTableB" zu verwenden, aber ich möchte immer noch verstehen, was vor sich geht.

Ich vermute, dass es etwas mit dem repeat und/oder click.delegate zu tun hat. Vielleicht wird der Ereignis-Listener zu einem anderen Bereich für die Tabellen und Zeilen hinzugefügt?

---

HTML

<template> 
    <h4>Table A</h4> 
    <!-- Note the table ref --> 
    <table id="tableA" ref="activeTable"> 
    <thead> 
    <tr> 
     <th>Foo</th> 
     <!-- Passing in table ref --> 
     <th><button click.delegate="addRow(activeTable)">Add</button></th> 
    </tr> 
    </thead> 

    <tbody> 
     <!-- Note the row ref --> 
     <tr repeat.for="foo of foos" ref="activeRow"> 
     <td class="editable-cell">${foo.id}</td> 
     <!-- Passing in row ref --> 
     <td><button click.delegate="editRow(activeRow)">Edit</button></td> 
     </tr> 
    </tbody> 
    </table> 

    <h4>Table B</h4> 
    <table id="tableB" ref="activeTable"> 
    <thead> 
    <tr> 
     <th>Bar</th> 
     <th><button click.delegate="addRow(activeTable)">Add</button></th> 
    </tr> 
    </thead> 

    <tbody> 
     <tr repeat.for="bar of bars" ref="activeRow"> 
     <td class="editable-cell">${bar.id}</td> 
     <td><button click.delegate="editRow(activeRow)">Edit</button></td> 
     </tr> 
    </tbody> 
    </table> 
</template> 

JS

export class App { 
    foos = [ 
    {id: 0}, 
    {id: 1}, 
    {id: 2}, 
    {id: 3}, 
    {id: 4}, 
    {id: 5}, 
    {id: 6}, 
    {id: 7}, 
    {id: 8}, 
    {id: 9}, 
    ]; 

    bars = [ 
    {id: 10}, 
    {id: 11}, 
    {id: 12}, 
    {id: 13}, 
    {id: 14}, 
    {id: 15}, 
    {id: 16}, 
    {id: 17}, 
    {id: 18}, 
    {id: 19}, 
    ]; 

    addRow(table) { 
    console.log("Adding tow to", table); 
    } 

    editRow(row) { 
    console.log('Editing', row); 
    } 
} 

Answer 1

ref ermöglicht es Ihnen, ein Element als eine Variable auf dem Bindungskontext zu verweisen. In der Regel sind Ihr Bindungskontext und das Ansichtsmodell Ihrer Seite (oder eines benutzerdefinierten Elements) ein und dasselbe. Wenn Sie jedoch mit einem "Vorlagen-Controller" (Verhalten, die DOM-Elemente hinzufügen/entfernen) wie repeat.for umgehen, kann der Bindungskontext geändert werden. Im Fall von repeat.for wird der Bindungskontext der spezifische Artikel für diese Iteration des Repeaters.

So sind Sie überschreiben die activeTable Eigenschaft auf VM Ihrer Seite, aber die activeRow Eigenschaft angebracht in foos und jedes Element jedes Element in bars wird. Dies ist das gewünschte Verhalten (in Bezug auf activeRow), da Sie das spezifische Element für diese Zeile an die Funktion auf der Seite VM übergeben können. Und für activeTable müssen Sie verschiedene Namen für jede Tabelle ref verwenden.