CODEWITHSUNDEEP
aurelia
C. Daniel
C. Daniel

Reputation: 141

Aurelia binding returning null on custom element

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

Upvotes: 2

Views: 389

Answers (4)

C. Daniel
C. Daniel

Reputation: 141

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

Upvotes: 0

qtuan
qtuan

Reputation: 687

Problem: in app.js, chart is not initialized until service.getAllCharts() finish. At that time, the custom element is already attached (i.e 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.

Upvotes: 0

Fabio
Fabio

Reputation: 11990

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

}

Upvotes: 0

Matt McCabe
Matt McCabe

Reputation: 3446

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

Upvotes: 0

Related Questions