2017-10-30 3 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의 관련 부분입니다 다음 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 
} 

나는 observerLocator를 사용 - 여기 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을 만들었습니다.

관련 문제