在ember.js中嵌套hasMany数据

时间:2016-03-17 18:56:43

标签: ember.js ember-data

我正在尝试访问我的促销代码组件中使用的父(优惠券)子(couponactivations)关系。例如,我试图在路由模型RSVP哈希中调用user.get('couponActivations').get('coupons')。优惠券我稍后会在组件中循环。就像我提到的那样,我希望能够从路线返回优惠券,但下面的内容并不起作用。

// app/routes/dashboard/settings/index.js
model() {
  let user = this.store.peekRecord('user', this.get('session.data.authenticated.id')),
  couponActivations = user.get('couponActivations');

  return Ember.RSVP.hash({
    user: user,
    couponActivations: couponActivations,
    coupons: couponActivations.get('coupons')
  });
}

我已经成功地在组件的初始化程序中获得优惠券,但我担心这种方式偏离了余烬模式,并使我的组件能够识别数据。

这是我的索引路线:

// app/routes/dashboard/settings/index.js
import Ember from 'ember';
import config from 'web-frontend/config/environment';

export default Ember.Route.extend({
  session: Ember.inject.service(),
  model() {
    let user = this.store.peekRecord('user', this.get('session.data.authenticated.id'));

    return Ember.RSVP.hash({
      user: user,
      profileImage: user.get('profileImage'),
      couponActivations: user.get('couponActivations')
    });
  }
});

以下是优惠券型号:

// app/models/coupon.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  description: DS.attr('string'),
  createdAt: DS.attr('date'),
  updatedAt: DS.attr('date'),
  discountType: DS.attr('string'),
  discountValue: DS.attr('number'),
  couponActivations: DS.hasMany('couponActivation', { async: true })
});

这是我的CouponActivation模型:

// app/models/coupon-activation.js
import DS from 'ember-data';

export default DS.Model.extend({
  expiresAt: DS.attr('date'),
  createdAt: DS.attr('date'),
  updatedAt: DS.attr('date'),
  promoCode: DS.attr('string'),
  user: DS.belongsTo('user'),
  coupon: DS.belongsTo('coupon')
});

在我的index.emblem文件中,我正在调用组件:

// app/templates/dashboard/settings/index.emblem
.container
  .row
    .col-xs-12.col-sm-12.col-md-8.col-md-offset-2
      .row-divider
        = dashboard/settings/promo-codes listerAccount=model.listerAccount savePromoCode='savePromoCode'

这是我的促销代码组件:

// app/components/dashboard/settings/promo-codes.js
import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit() {
      this.sendAction('savePromoCode', this.get('promoCode'));
      this.set('promoCode', null);
    }
  }
});

这是promo-code.emblem模板:

// app/templates/components/dashboard/settings/promo-codes.emblem
h2 = t 'dashboard.settings.promo-codes.title'
form submit="submit"
  fieldset.form-group class={ if (v-get promoCode 'isInvalid') 'has-danger' }
    .input-group
      = input type="text" value=promoCode class="form-control"
      if (v-get promoCode 'isInvalid')
        span.text-help = v-get promoCode 'message'

      span.input-group-btn
        button.btn.btn-sm.btn-primary role="button"
          = t 'dashboard.settings.promo-codes.apply-code'

if listerAccount
  .row.m-t-1
    .col-xs-5
      .text-xs-center
        p = t 'dashboard.settings.promo-codes.current-credit'
        p = format-number listerAccount.creditsBalance style='currency' currency='USD'

    .col-xs-7
      .text-xs-center
        p = t 'dashboard.settings.promo-codes.current-free-rentals'

0 个答案:

没有答案