我正在使用Ember.js我的bower.json文件是:
{
"name": "stats-front-end",
"dependencies": {
"handlebars": "~1.3.0",
"jquery": "~2.1.1",
"ember": "1.8.1",
"ember-data": "1.0.0-beta.12",
"ember-resolver": "~0.1.10",
"loader.js": "stefanpenner/loader.js#1.0.1",
"ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.0.4",
"ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
"ember-qunit": "0.1.8",
"ember-qunit-notifications": "0.0.4",
"qunit": "~1.15.0",
"ember-charts": "~0.3.0"
}
}
我正在尝试在我的app/templates/languages/index.hbs
视图中显示饼图,如下所示。 目前app/templates/languages/index.hbs
是这样的:
<ul>
{{#each}}
<li> {{name}} {{occurences}}</li>
{{else}}
<li>No language found.</li>
{{/each}}
</ul>
<div class="chart-container">
{{pie-chart data=content}}
</div>
如果我删除图表,我的#each
块呈现良好(从余烬数据中提取)。 但是,当我使用位于:app/controllers/languages/index.js
的控制器来装饰视图时,即使没有从余烬数据中提取,我也一无所获。
应用/控制器/语言/索引.js
import Ember from 'ember';
export default Ember.ArrayController.extend({
content: [
{
"label": "Equity",
"value": 12935781.176999997
},
{
"label": "Real Assets",
"value": 10475849.276172025
},
{
"label": "Fixed Income",
"value": 8231078.16438347
},
{
"label": "Cash & Cash Equivalent",
"value": 5403418.115000006
},
{
"label": "Hedge Fund",
"value": 1621341.246006786
},
{
"label": "Private Equity",
"value": 1574677.59
}
]
});
控制台读取:
Uncaught Error: <stats-front-end@view:default::ember426> Handlebars error: Could not find property 'pie-chart' on object <stats-front-end@controller:languages/index::ember418>.
我尝试了语法的变体来将饼图放入视图中,但没有成功。 理想情况下,我想从余烬数据中的内容构建饼图,但此时只需获得一些要渲染的内容就很好了。
该项目是开源的,可在此处找到
现在 Ember-Charts 代码不包含在构建的distassetsvendor.js
文件中。在 ember-cli 中安装 bower 软件包并不意味着已安装软件包的代码将包含在您的应用程序中。Ember 根本找不到pie-chart
组件,因此它pie-chart
作为控制器上的属性进行查找。您应该将以下代码添加到您的Brocfile.js
:
app.import('bower_components/ember-charts/dist/ember-charts.js');
app.import('bower_components/ember-charts/dist/ember-charts.css');
控制器的content
通常在#setupController
方法中设置在route
中。由于您要从languages/index
路由返回this.store.find('language')
,因此 Ember 将尝试在控制器的内容上设置它。所以不要手动设置它。
因此,首先,尝试在其他属性上设置该数组,例如data
,看看是否可以在模板中显示它(不使用{{pie-chart}}
组件)。然后尝试让它与组件一起使用。
最后一点,您应该开始使用each
助手的显式形式(例如 each x in controller
而不是each
),因为隐式的很快就会被弃用。
最后尝试使用组件而不是控制器。例如,您可以将ArrayController
设置为LanguageListComponent
(然后可以将饼图数据移动到那里)。