Bindung benutzerdefiniertes Element in dem ersten Belastung

Question

In aurelia: Ich habe eine Zeichenfolge interpulation über Objekteigenschaft, die in der app.html gut funktioniert - es zeigt die Anzahl der Konten:

ALL ACCOUNTS (${userAccountsData.length}) 

In der ersten Belastung, ich sehe, dass der Wert ändert sich nach einigen Millisekunden von 0 bis zum tatsächlichen Wert (Daten werden vom Dienst abgerufen), , aber - beim Versuch, aggregierte Daten (Anzahl der aktiven Konten) über denselben Daten in einer Vorlage anzuzeigen (benutzerdefiniertes Element) die Daten bleiben als 0 und nicht aktualisiert als userAccountsData.length * Beim erneuten Laden nach dem ersten Laden - die Daten werden so angezeigt, wie sie sein sollten. Dies ist die benutzerdefinierte Elementinstanz in dem app.html:

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

Und dieser Teil des HTML-Code des benutzerdefinierten Elements selbst:

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

Dies ist der relevante Teil des benutzerdefinierten Elements VM :

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

In den app.js

verwende ich observerLocator - hier der Code auf dem Arbeitsteil von userAccountsData.length bezogen ist:

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

** Eine Arbeit, die ich fand (obwohl ich nicht sicher bin, ob das der beste Weg ist) ist, die Aggregation in der app.js (im Observer-Teil) in Objekt zu tun und das bereits aggregierte Objekt zu binden zum benutzerdefinierten Element - das funktioniert. Ich suche immer noch nach der oben genannten Lösung.

Answer 1

Es sieht so aus, als ob das Problem ist, dass Sie userAccountsData an accountsData auf Ihrem benutzerdefinierten Steuerelement binden; dann Zuweisen this.accounts = this.accountsData; und schließlich später Sie zuweisen userAccountsData in app.js

Da accounts nicht beobachtet oder an das Original userAccountsData gebunden ist, behält es den Verweis auf das ursprüngliche Array (das auf ein leeres Array festgelegt ist) und wird nie aktualisiert.

Es gibt eine Race Condition beim Refresh, wobei ein Cache wahrscheinlich bedeutet, dass userAccountsData den aktualisierten Wert erhält, bevor die Bindung auftritt, weshalb es manchmal funktioniert.

Die Lösung besteht darin, einen Teil der Neuzuordnung zu entfernen und einfach direkt an accounts zu binden und das Zwischenprodukt accountsData zu vergessen.

Ich erstellte eine gist here zeigt das unterschiedliche Verhalten.