Aurelia nicht dreckige Prüffunktion Ergebnis in HTML Klasse Attributbindung

Question

Ich habe eine Tabellenzeile, die ein Benutzer auswählen kann, indem er darauf klickt oder zu einer URL geht (Router-Parameter werden bei der Aktivierung des Ansichtsmodells überprüft). Das Markup sieht aus wie

<!--...--> 
<template repeat.for="foo of foos"> 
    <template repeat.for="bar of foo.bars"> 
    <tr class="${(foo.pk == selectedFoo && bar.pk == selectedBar) ? 'active' : ''}" click.delegate="selectFooBar(foo.pk, bar.pk)"><!--...--></tr> 
    </template> 
</template> 
<!--...--> 

Das funktioniert gut. Wenn der Benutzer klickt, setzt selectFooBar die View-Model-Parameter und die Klasse wird auf dem tr festgelegt.

Allerdings habe ich versucht, die bedingte in eine Methode Refactoring (die bedingte komplexer erhalten):

<tr class="${isFooBarSelected(foo.pk, bar.pk) ? 'active' : ''}" click.delegate="selectFooBar(foo.pk, bar.pk)"><!--...--></tr> 

isFooBarSelected nur liefert true/false basierend auf dem bedingten. Allerdings wird die Methode nach dem Laden der Seite nicht überprüft. Wenn sich die ausgewählten Parameter ändern (weil der Benutzer auf eine andere Zeile klickt), wird die Klasse nicht aktualisiert. Irgendwelche Ideen, wie man Aurelia schmutzig macht, überprüfen isFooBarSelected?

---

View-Modell

export class Blah { 

    foo = []; 
    selectedFoo = undefined; 
    selectedBar = undefined; 

    // ... 

    /** 
    * Lifecycle method - just before view-model is displayed 
    * @param params route parameters 
    */ 
    activate(params) { 
    this.selectedFoo = params.foo; 
    this.selectedBar = params.bar; 
    } 

    selectFooBar(foo, bar) { 
    this.selectedFoo = foo; 
    this.selectedBar = bar; 
    } 

    isFooBarSelected(foo, bar) { 
    console.log('check', foo, bar, this.selectedFoo, this.selectedBar); 
    return foo == this.selectedFoo && bar == this.selectedBar; 
    } 
} 

Answer 1

Wenn Sie nicht selectedFoo und selectedBar an die Funktion übergeben tun, dann Aurelia wird wissen, nicht die Funktion aufrufen, wenn ihre Werte ändern. Da diese beiden Werte den Rückgabewert der Funktion tatsächlich ändern (für eine gegebene foo.pk und bar.pk), müssen Sie diese übergeben.

Aurelia versucht, schlau zu sein und keine schmutzigen Funktionen zu überprüfen. Es geht davon aus, dass die Funktionen, die Sie in einer solchen Situation aufrufen, reine Funktionen sind und dass sich ihr Rückgabewert nur ändert, wenn sich einer der Eingänge ändert.

So ändern Sie einfach die Funktion:

isFooBarSelected(foo, bar, selectedFoo, selectedBar) { 
    console.log('check', foo, bar, this.selectedFoo, this.selectedBar); 
    return foo == selectedFoo && bar == selectedBar; 
} 

und die Nutzung

${isFooBarSelected(foo.pk, bar.pk, selectedFoo, selectedBar) ? 'active' : ''} 

und alles wird wie erwartet.