Question

我正在尝试使用Aurelia将数据集合传递给自定义元素，但在尝试访问自定义元素中的数据时会变为null。我已经包含了我的问题的要点：https://gist.run/?id=3c51fff719dc4b482136dadb860618fd

Answer 1

这可能只是答案的一半，因为仍有错误，但按照以下更新chartExample.js至少会为您提供图表

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

修改：我猜您的JSON无效，因为它现在有效......

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

试试这个：

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

问题：在app.js中，chart在service.getAllCharts()完成之前未初始化。那时，自定义元素已经附加（即bind()已经运行）。

逻辑上，您只想在已初始化必要数据后附加自定义元素。您可以修改app.html，如下所示：

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

通过这种方式，您可以<chart-example>响应＆＃34;一次性＆＃34;输入数据。

另一种方法是让<chart-example>本身观察可绑定属性info并相应地采取行动。这样，您可以使自定义元素持续响应输入数据。

Answer 4

解决方案是，但图表调用了chartExample.js上的bind（）{}函数

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

Aurelia绑定在自定义元素上返回null

4 个答案: