本文介绍了使用rails后端呈现Ember组件(google折线图)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最近我开始一个项目与rails后端和ember js,但我发现在一起的文档很难找到或相当不明确,但我的应用程序的一部分工作完美。

Recently I started a project with rails backend and ember js, however I find the documentation on both together is difficult to find or quite ambiguous, however I have parts of my app working perfectly.

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

Now, I decided to code a google line chart in an ember component. With ember inspector, it tends to throw an error on localhost:3000/#/chart currently the error:

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 p>

javascripts/routes/chart_route:

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

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

Where I'm calling the chart component.. javascripts/templates/chart.handlebars

<h2>Chart one</h2>

{{chart data= model.modelOne}}

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


推荐答案

关于命名约定:

据我所知,你把组件称为charts,这可能是问题。

As far as I see, you called your component simply "charts", that might be the problem.

这篇关于使用rails后端呈现Ember组件(google折线图)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 03:05