Question

我已经搜索过这个并没有找到答案。我有2条路线：＆＃34;索引＆＃34;，用于创建/更新费用清单，以及＆＃34;图表＆＃34;，用于绘制费用的值。

为了处理费用图表，我有以下功能：

getData: function() {
    var expenses = this.store.all('expense');
    expenses.update();
    var retarr = Ember.A();
    expenses.forEach(function(expense) {
        retarr.pushObject({
            label: expense.get('name'),
            value: expense.get('amount'),
            group: 'expense'
        });
    });
    return retarr;
}.property()

然后将其传递给Charts路线中的ember-charts组件。

<script type="text/x-handlebars" id='charts'>
<div class="chart-container">
  {{horizontal-bar-chart data=getData}}
</div>

但是，如果我在＆＃34;索引＆＃34;中创建/删除费用？路线和过渡到＆＃34;图表＆＃34;路由，尽管调用＆＃34; update（）＆＃34; DS.RecordArray也不会更新。功能。因此，在刷新页面之前，图表不会反映创建/删除的更改。

如何修复此问题，以便RecordArray自动更新图表？尝试不同的事情，我已经两天不知所措了。谢谢！

Answer 1

您的属性getData应绑定到任何内容，如果此内容是数组，则应使用@each。例如，您可以看到here：

remaining: function() {
    var todos = this.get('todos');
    return todos.filterBy('isDone', false).get('length');
}.property('todos.@each.isDone')

我建议你另一个approch，让我们修改你的模型：

App.Chart = DS.Model.extend({
    // fieds here...

    label: function() {
        return this.get("name");
    }.property("name"),
    value: function() {
        return this.get("amount");
    }.property("amount"),
    group: function() {
        return "expense";
    }.property(),
)};

在路线集myCharts属性中：

App.ChartRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this._super(controller, model);
        var charts = this.store.find("chart");
        controller.set("myCharts", charts);
    }
});

然后你可以使用水平图表：

<div class="chart-container">
  {{horizontal-bar-chart data=myCharts}}
</div>

注意：我没有测试过这段代码但它应该可以正常工作

更改路线时更新DS.RecordArray

1 个答案: