javascript - Aurelia 未脏检查功能导致 HTML 类属性绑定(bind)

Question

我有一个表行，用户可以通过单击它或转到 URL 来选择该行(在 View 模型激活时检查路由器参数)。标记看起来像

<!--...-->
<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 设置 View 模型参数，并在 tr 上设置类。

但是，我尝试将条件重构为方法(条件会变得更复杂):

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

isFooBarSelected 仅根据条件返回 true/false。但是，现在页面加载后不会检查该方法。当选定的参数更改时(因为用户单击另一行)，该类不会更新。有什么想法如何使 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 传递给函数，那么 Aurelia 将不会知道在它们的值发生变化时调用该函数。鉴于这两个值将实际更改函数的返回值(对于给定的 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' : ''}

一切都会按预期进行。