Question

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

我的问题是，即使我可以在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日更新 所以我想我已经证明了这个问题与我想要过滤与模型有关系的数据并且没有直接加载到路径中的问题。我尝试对我直接在路由中加载的数据使用完全相同的过滤器，并且即使直接在加载时也能很好地工作。

在加载

0 个答案: