Aurelia не грязная функция проверки приводит к привязке атрибута класса HTML

Question

У меня есть строка таблицы, которую пользователь может выбрать, щелкнув по ней или перейдя по URL-адресу (параметры маршрутизатора проверяются при активации модели просмотра). Наценка выглядит как

<!--...--> 
<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> 
<!--...--> 

Это прекрасно работает. Когда пользователь нажимает, selectFooBar устанавливает параметры модели просмотра, и класс устанавливается на tr.

Однако я попытался рефакторингом условного в метод (условный получат более сложным):

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

isFooBarSelected просто возвращает истину/лжи на основе условного. Однако теперь этот метод не проверяется после загрузки страницы. Когда выбранные параметры изменяются (поскольку пользователь нажимает на другую строку), класс не обновляется. Любые идеи, как сделать Aurelia грязной проверкой isFooBarSelected?

---

View-модель

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

Если вы не проходите selectedFoo и selectedBar функции, то Аурелия не будет знать, чтобы вызвать функцию при изменении их значения. Учитывая, что эти два значения - это то, что фактически изменит возвращаемое значение функции (для заданных foo.pk и bar.pk), вам придется пройти их.

Aurelia пытается быть умным и не выполнять грязную проверку функций. Предполагается, что функции, которые вы вызываете в такой ситуации, являются чистыми функциями и что их возвращаемое значение будет изменяться только при изменении одного из входов.

Так просто изменить функцию:

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

и использование в

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

и все будет работать, как ожидалось.