Aurelia binding returning null on custom element

Question

I am trying to pass a collection of data to a custom element using Aurelia but am getting null when trying to access the data in the custom element. I have included a gist of my issue: https://gist.run/?id=3c51fff719dc4b482136dadb860618fd

Answer 1

This is probably just half an answer as there's still an error, but updating chartExample.js as per below at least gives you a chart

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

Edit : I guess your JSON wasn't valid too as it works now...

{
    "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 is not initialized until service.getAllCharts() finish. At that time, the custom element is already attached (ie its bind() already run).

Logically, you want to attach the custom element only after the necessary data already initialized. You can modify app.html like below:

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

This way, you can make <chart-example> response "one-time" to the input data.

Another way is to make <chart-example> itself observe the bindable property info and act accordingly. This way, you can make the custom element continuously response to input data.

Answer 4

The solution was to but the chart calls into the bind(){} function on the 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;    
  }
}