2017-10-30 8 views
0

:私はapp.htmlで正常に動作オブジェクトのプロパティを超える文字列interpulationを持っている - それは、アカウントの数を示しています。最初のロードでバインディングカスタム要素オーレリアで

ALL ACCOUNTS (${userAccountsData.length}) 

、私がいることがわかりしかし - テンプレート(カスタム要素)の同じデータに対して集計データ(アクティブなアカウントの数)を表示しようとすると、0から実際の値(データがサービスから取得しています)までの数ミリ秒後に値が変化します。データは0のままで、として更新されません。userAccountsData.length *最初の読み込み後にもう一度リフレッシュすると、データがそのまま表示されます。 これはapp.htmlでカスタム要素のインスタンスである:

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

そして、これはカスタム要素自体のHTMLの一部です:

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

これは、カスタム要素VMの関連する部分であります:私はobserverLocator使用app.jsで

"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 
} 

- ここuserAccountsData.lengthの作動部分に関連するコードは次のとおりです。

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

**私が見つけた回避策(これは最善の方法ではありませんが)は、オブジェクトのapp.js(オブザーバー部分)で集計を行い、既に集約されたオブジェクトをバインドすることですカスタム要素に - これは動作しています。私はまだ上記の解決策を探しています。

答えて

0

カスタムコントロールでuserAccountsDataからaccountsDataにバインドしているように見えます。 this.accounts = this.accountsDataを割り当てます。最後に、userAccountsDataをapp.jsに再割り当てします。

accountsは、元のuserAccountsDataを観測またはバインドしていないため、元の配列(空の配列に設定されている)への参照を保持し、決して更新されません。

リフレッシュの競合状態があります。一部のキャッシュでは、バインディングが発生する前にuserAccountsDataが更新された値を取得する可能性があります。

解決方法は、一部の再割り当てを削除し、ただaccountsに直接バインドし、中間accountsDataを忘れることです。

異なる動作を示すgist hereを作成しました。

関連する問題