最近我开始了一个使用 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}}
最佳答案
至于命名约定:
Components must have a dash in their name. So blog-post is an acceptable name, but post is not. This prevents clashes with current or future HTML element names, and ensures Ember picks up the components automatically.
http://emberjs.com/guides/components/defining-a-component/
据我所知,您将组件简单地称为“图表”,这可能就是问题所在。
关于javascript - 使用 Rails 后端渲染 Ember 组件(谷歌折线图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22408976/