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

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>对输入数据做出“一次性”响应。

另一种方法是让<chart-example>本身遵守可绑定属性info并相应地执行操作。这样，您就可以使自定义元素连续响应输入数据。