Recientemente comencé un proyecto con rails backend y ember js, sin embargo, encuentro que la documentación de ambos juntos es difícil de encontrar o bastante ambigua, sin embargo, tengo partes de mi aplicación que funcionan perfectamente.

Ahora, decidí codificar un gráfico de líneas de Google en un componente Ember. Con el inspector de ascuas, tiende a arrojar un errorlocalhost:3000/#/chart actualmente el error:

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

Entonces, aquí está mi código para los archivos relevantes:

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

Donde estoy llamando al componente gráfico ... javascripts / templates / chart.handlebars

<h2>Chart one</h2>

{{chart data= model.modelOne}}

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