Question

在aurelia：我在对象属性上有一个字符串插值，在app.html中工作正常 - 它显示了帐户数量：

<account-status-selection-bar accounts-data.bind="userAccountsData"></account-status-selection-bar>

在初始加载中，我看到值在从0到实际值（数据从服务检索）的几毫秒后发生变化，但 - 在尝试显示聚合数据时（计数）（活动帐户）对模板中的相同数据（自定义元素） - 数据保持为0且未更新为 userAccountsData.length *初始加载后再次刷新时 - 数据显示应该是。这是app.html中的自定义元素实例：

<template>
<div ref="active" 
class="selection">${accountActivationDistribution.numberOfActiveAccounts}

这是自定义元素本身的HTML的一部分：

"use strict";
import { bindable} from 'aurelia-framework';
export class accountStatusSelectionBar {
@bindable accountsData;

constructor() {
   this.accounts = [];
   this.accountActivationDistribution = { numberOfActiveAccounts: 0,
   numberOfInactiveAccounts : 0,
   numberOfTotalAccounts : 0
}
get activeAccounts() {
   var activeAccounts = this.accounts.filter(function(account) {
   return account.IsApproved;
  });
  return activeAccounts.length;
}
attached()//bind()
{
   this.accounts = this.accountsData;
   this.accountActivationDistribution.numberOfActiveAccounts =        
   this.activeAccounts
 }

这是自定义元素VM的相关部分：

constructor() {
 this.userAccountsData = [];
 ....
 this.subscribe = this.observerLocator.getObserver(accounts, "all")
  .subscribe((value) => {
    if (!value)
      return;
    this.userAccountsData = value;

在app.js中我使用observerLocator - 这是与userAccountsData.length的工作部分相关的代码：

UPDATE T
    SET annual = (SELECT SUM(cast(annual as int)) FROM @tbl WHERE annual <> 'TotalSum' AND productCode = T.productCode GROUP BY productCode)
FROM #MainCalcTemp T
WHERE annual = 'TotalSum'

**我找到的解决方法（尽管我不确定这是最好的方法）是在对象中的app.js（在观察者部分中）进行聚合并将已聚合的对象绑定到自定义元素 - 这是有效的。我还在寻找上面提到的解决方案。

Answer 1

问题是您在自定义控件上将userAccountsData绑定到accountsData;然后分配this.accounts = this.accountsData;最后，您将在app.js中重新分配userAccountsData。

因为accounts没有观察或绑定到原始userAccountsData，所以它维护对原始数组的引用（设置为空数组）并且永远不会更新。

刷新时存在竞争条件，其中某些缓存可能意味着userAccountsData在绑定发生之前获取更新的值，这就是它有时有效的原因。

解决方案是删除部分重新分配，然后直接绑定到accounts并忘记中间accountsData。

我创建了一个显示不同行为的gist here。

在初始加载中绑定自定义元素

1 个答案: