0

我正在使用 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块会呈现良好（从 ember-data 中提取）。但是，当我使用位于以下位置的控制器app/controllers/languages/index.js来装饰视图时，我什么也得不到，即使没有从 ember 数据中提取。

应用程序/控制器/语言/index.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-data 中的内容构建饼图，但此时只需渲染一些东西就可以了。

该项目是开源的，可以在这里找到

4

2 回答 2

1

控制器的content, 通常设置在方法中的route, 中#setupController。由于您this.store.find('language')从languages/index路线返回，Ember 将尝试在控制器的内容上设置它。所以不要手动设置。

因此，首先，尝试在其他属性上设置该数组，例如data，看看是否可以在模板中显示它（不使用{{pie-chart}}组件）。然后尝试让它与组件一起工作。

最后一点，您应该开始使用each帮助器的显式形式（例如，each x in controller而不是each），因为隐式的很快就会被弃用。

最后尝试使用组件而不是控制器。例如，您可以制作ArrayController一个LanguageListComponent（然后您可以将饼图数据移到那里）。

于 2014-12-06T21:29:33.833 回答
1

现在 Ember-Charts 代码不包含在您的构建dist\assets\vendor.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');

于 2014-12-06T21:42:48.933 回答