Question

我无法弄清楚为什么我的计算属性不起作用，但它似乎与从服务器获取数据有关。当应用程序从服务器获取数据时，常规属性（days）将正确显示（请参阅下面的视图），但计算属性（dates）会生成两个空<li>秒。但是，当我通过this.store.push在路由对象的model函数中插入数据时（因此数据在呈现视图之前在客户端上），那么这两个属性是否正确显示？

在从服务器获取hasMany关系模型后，如何让计算属性重新计算？

日历模型：

import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
    name: DS.attr('string'),
    days: DS.hasMany('day'),
    dates: Ember.computed('days.@each', function () {
        return this.get('days').map(day => day.get('date'));
    })
});

日模型

import DS from 'ember-data';

export default DS.Model.extend({
    date: DS.attr('string'),
    calendar: DS.belongsTo('calendar')
});

视图

The "regular" property
<ul>
{{#each model.days as |d|}}
    <li>{{d.date}}</li>
{{/each}}
</ul>

The computed property
<ul>
{{#each model.dates as |d|}}
    <li>{{d}}</li>
{{/each}}
</ul>

路径中的数据

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    this.store.push({
      "data": [{
        "type":"calendar",
        "id":1,
        "attributes": {
          "id":1,
          "name":"first calendar",
          "days":[2,3],
        },
        "relationships": {
          "days": {
            "data":[
              {"id":2,"type":"day"},
              {"id":3,"type":"day"}
            ]
          }
        }
      }, {
        "type":"day",
        "id":2,
        "attributes":{
          "id":2,
          "calendar":1,
          "date":"2016-06-15"
        }
      }, {
        "type":"day",
        "id":3,
        "attributes":{
          "id":3,
          "calendar":1,
          "date":"2016-06-17"
        }
      }]
    });

    return this.store.findRecord('calendar', 1);
  }
});

Answer 1

我认为你的计算属性不起作用，因为“days”是异步的，除非你使用speficy属性，否则不能用于计算属性 - 正如torzaburo所建议的那样。

另一种方法是使用computed.mapBy：

http://emberjs.com/api/classes/Ember.computed.html#method_mapBy

Navigated to..

有一种使用PromiseArray的方法

dates: Ember.computed.mapBy('days', 'date')

Ember计算属性不使用服务器数据

日历模型：

日模型

视图

路径中的数据

1 个答案: