Question

最近我开始了一个带有rails后端和ember js的项目，但是我发现两者的文档很难找到或者很模糊，但是我的部分应用程序运行得很好。

现在，我决定在ember组件中编写一个谷歌折线图。使用ember检查器时，它往往会在localhost:3000/#/chart错误上抛出错误：

Uncaught Error: <Sample.ChartView:ember526> Handlebars error: Could not find property 'chart' on object (generated chart controller)

所以，这是我的相关文件的代码：

assets/javascript/components/chart_component.js：

var data = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
    {
      fillColor : "rgba(220,220,220,0.5)",
      strokeColor : "rgba(220,220,220,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",
      data : [51,10,18,58,65,95,87]
    },
    {
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      data : [28,48,40,19,96,27,100]
    }
  ]
};

var data2 = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
    {
      fillColor : "rgba(220,220,220,0.5)",
      strokeColor : "rgba(220,220,220,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",
      data : [51,10,18,58,65,95,87]
    },
    {
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      data : [28,48,40,19,96,27,100]
    }
  ]
};

Sample.LineChartComponent = Ember.Component.extend({
  tagName: 'canvas',
  attributeBindings: ['width', 'height'],
  width: '480',
  height: '360',
  data: null,
  didInsertElement: function() {
    var ctx = this.get('element').getContext("2d");
    var myNewChart = new Chart(ctx).Line(this.get('data'));
  }
});

javascripts/routes/chart_route：

Sample.ChartRoute = Ember.Route.extend({
  model: function(){
    return Ember.Object.create({
      modelOne: data,
      modelTwo: data2
   });
  }
});

我正在调用图表组件.. javascripts / templates / chart.handlebars

<h2>Chart one</h2>

{{chart data= model.modelOne}}

<h2>Chart two</h2>
{{chart data= model.modelTwo}}

Answer 1

至于命名惯例：

组件名称中必须包含短划线。所以博客文章是一个可接受的名字，但发布不是。这可以防止与当前冲突或未来的HTML元素名称，并确保Ember选择组件自动。

http://emberjs.com/guides/components/defining-a-component/

据我所知，你把你的组件称为“图表”，这可能就是问题所在。

使用rails后端渲染Ember组件（谷歌折线图）

1 个答案: