灰烬在加载时过滤异步数据

Question

我的路线/bets有一个组件，可以显示按未来日期过滤的投注。 路线模板还具有指向/bets/new路线的链接，用户可以在其中添加新的投注。 每个下注都有一个与User的belongsTo关系。

我的问题是，即使我在Ember Inspector中可以看到数据已加载，我的赌注也不会显示在组件中。 当我通过/bets/new的表单添加新的投注时，它确实显示。

我的理由是，由于数据是异步的，因此直到我通过下新的赌注要求它之前，它都不会加载，但是我无法理解。

bets.hbs

{{outlet}}

 {{#link-to 'bets.new' class="btn btn-default"}}
   {{fa-icon "plus"}} New bet
 {{/link-to}}

 {{#upcoming-bets bets=model.bets}}
 {{/upcoming-bets}}

bets.js

import Ember from 'ember';

export default Ember.Route.extend({

  model () {
    return this.store.findRecord('user', this.get('session.currentUser.uid'));
  }

});

即将到来的bets.hbs

<h2>Upcoming bets:</h2>

{{#each upcomingBets as |bet|}}

<div class="bet">
    <h3>{{bet.homeTeam}} vs {{bet.awayTeam}}</h3>
    <p>
      <small>{{moment-format bet.eventDate 'MMMM Do'}}</small>
    </p>
    <p>
      Bet type: {{bet.type}}
    </p>
    <p>
      Bet: {{bet.bet}}
    </p>
    <p>
      Stake: {{bet.stake}}
    </p>
    <p>
      User: {{bet.user}}
    </p>
    <button class="btn btn-danger" {{action "deleteBet" bet}}>{{fa-icon "trash"}}</button>
</div>

{{else}}

<p>
  You don't have any upcoming bets. Maybe {{#link-to 'bets.new'}}add one?{{/link-to}}
</p>

{{/each}}

即将发行的bets.js

import Ember from 'ember';

export default Ember.Component.extend({

  upcomingBets: function() {

    var today = new Date();
    today.setHours(0,0,0,0);

    return this.get('bets').filter(function(bet){
      return bet.get('eventDate') > today;
    });
  }.property('bets.@each'),

  actions: {
    deleteBet: function(bet){
      bet.destroyRecord();
    }
  }

});

new.js

import Ember from 'ember';

export default Ember.Controller.extend({

  actions: {

    addBet() {
      var newBet = this.store.createRecord('bet', {
        created: new Date(),
        sport: this.get('selectedSport.name'),
        league: this.get('league'),
        homeTeam: this.get('homeTeam'),
        awayTeam: this.get('awayTeam'),
        type: this.get('type'),
        bet: this.get('bet'),
        stake: this.get('stake'),
        odds: this.get('odds'),
        eventDate: this.get('eventDate'),
      });

      // Save user as well as bet
      var user = this.get('user');
      user.get('bets').addObject(newBet);

      newBet.save().then(function(){
        return user.save();
      });
    }
  }

});

user.js

import DS from 'ember-data';

export default DS.Model.extend({
  email: DS.attr('string'),
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  bets: DS.hasMany('bet', { async: true })
});

bet.js

import DS from 'ember-data';

export default DS.Model.extend({
  created: DS.attr('date'),
  sport: DS.attr('string'),
  league: DS.attr('string'),
  homeTeam: DS.attr('string'),
  awayTeam: DS.attr('string'),
  type: DS.attr('string'),
  bet: DS.attr('string'),
  stake: DS.attr('number'),
  odds: DS.attr('number'),
  eventDate: DS.attr('date'),
  win: DS.attr('boolean', {defaultValue: false}),
  closed: DS.attr('boolean', {defaultValue: false}),
  user: DS.belongsTo('user', { async: true })
});

我感谢任何指示。 谢谢！

2016年11月22日更新

我试图通过将过滤器部件移到控制器上来使事情变得更简单，更干净，并且通过匹配字符串来使过滤器本身更简单。 我仍然有完全相同的问题-在我添加新的下注之前，什么都不会渲染，此时过滤器将按预期工作并显示正确的下注。 我也很难研究这个问题，因为大多数示例都会在过滤完成之前等待一些动作，例如在输入字段中键入内容。 我需要在加载时进行过滤。

这是我的更新文件：

bets.hbs

{{outlet}}

{{#link-to 'bets.new' class="btn btn-default"}}
  {{fa-icon "plus"}} New bet
{{/link-to}}

  {{#each upcomingTest as |bet|}}
  <p>
    {{bet.homeTeam}}
  </p>
  {{/each}}

控制器/bets.js

import Ember from 'ember';

export default Ember.Controller.extend({

  upcomingTest: function() {

    var team = 'EXAMPLE';

    return this.get('model.bets').filterBy('homeTeam', team);

  }.property('model.bets.@each')

});

2016年11月23日更新因此，我认为我已经证明了这个问题与我想过滤与模型有关系且未直接在路线中加载的数据有关。 我尝试对直接在路线中加载的数据使用完全相同的过滤器，即使在直接加载时，效果也很好。