Aurelia Bindung Rückkehr null auf benutzerdefiniertes Elemente

Question

Ich versuche, eine Sammlung von Daten zu einem benutzerdefinierten Elemente Aurelia passieren verwenden, aber mir null bekommen, wenn die Daten in dem benutzerdefinierten Elemente zuzugreifen versuchen. Ich habe einen Kern meiner Frage enthalten: https://gist.run/?id=3c51fff719dc4b482136dadb860618fd

Answer 1

Dies ist wahrscheinlich nur eine halbe Antwort, da es immer noch ein Fehler ist, aber chartExample.js nach unten zumindest gibt Ihnen ein Diagramm

import {inject, bindable} from 'aurelia-framework'; 

export class ChartExample{ 
    @bindable info 

    infoChanged(value){ 
    this.seriesDefaults = this.info.seriesDefaults; 
    this.series = this.info.series; 
    this.valueAxis = this.info.valueAxis; 
    this.categoryAxis = this.info.categoryAxis; 
    this.tooltip = this.info.tooltip;  
    } 
} 

bearbeiten Aktualisierung: ich denke, Ihre JSON war auch nicht gültig, wie es jetzt funktioniert ...

{ 
    "title": "CHART", 
    "seriesDefaults": { 
     "type": "area", 
     "area": { 
      "line": { 
       "style": "smooth" 
      } 
     } 
    }, 

    "series": [{ 
     "name": "India", 
     "data": [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855] 
    }, { 
     "name": "World", 
     "data": [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727] 
    }, { 
     "name": "Haiti", 
     "data": [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590] 
    }], 

    "valueAxis": { 
     "labels": { 
      "format": "{0}%" 
     }, 
     "line": { 
      "visible": false 
     }, 
     "axisCrossingValue": -10 
    }, 

    "categoryAxis": { 
     "categories": [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011], 
     "majorGridLines": { 
      "visible": false 
     }, 
     "labels": { 
      "rotation": "auto" 
     } 
    }, 

    "tooltip": { 
     "visible": true, 
     "format": "{0}%", 
     "template": "${series.name} ${value}" 
    } 
} 

Answer 2

Try this:

import {inject, bindable} from 'aurelia-framework'; 
import {HttpClient} from 'aurelia-http-client'; 
import {Service} from './service'; 

@inject(HttpClient, Service) 
export class App { 

    //@bindable chart; 

    constructor(httpClient, service){ 
    this.httpClient = httpClient; 
    this.service = service; 
    } 

    activate() { 
    return this.service.getAllCharts() 
     .then(chart => { 
     this.chart = chart; 
     }); 
    } 

} 

Answer 3

Problem: in app.js, chart wird nicht initialisiert, bis service.getAllCharts() beenden. Zu diesem Zeitpunkt ist das benutzerdefinierte Element bereits angehängt (d. H. Seine bind() ist bereits ausgeführt).

Logischerweise möchten Sie das benutzerdefinierte Element nur anschließen, nachdem die erforderlichen Daten bereits initialisiert wurden. Sie können app.html wie unten ändern:

<chart-example if.bind="chart" info.bind="chart"></chart-example> 

Auf diese Weise können Sie <chart-example> Antwort „one-time“ an die Eingangsdaten machen. Eine andere Möglichkeit besteht darin, <chart-example> selbst die bindbare Eigenschaft info zu beobachten und entsprechend zu handeln. Auf diese Weise können Sie das benutzerdefinierte Element kontinuierlich auf Eingabedaten reagieren lassen.

Answer 4

Die Lösung war, aber das Diagramm ruft in die bind() {} Funktion auf den chartExample.js

import {inject, bindable} from 'aurelia-framework'; 

export class ChartExample{ 
    @bindable info 

    bind(){ 
    this.seriesDefaults = this.info.seriesDefaults; 
    this.series = this.info.series; 
    this.valueAxis = this.info.valueAxis; 
    this.categoryAxis = this.info.categoryAxis; 
    this.tooltip = this.info.tooltip;  
    } 
}