Question

在保存具有hasMany关系的表单时遇到一些麻烦。当我更新现有的productVariant时，一切正常。当我要创建新产品或通过向每个产品添加新变体来更新现有产品时，就会出现问题。我想达到什么目标？如您所见，所有我的productVariant都显示在表格中。我想通过单击一个调用'addVariant'动作的按钮来创建新的productVariant，并向现有表动态添加新行，并可能填充输入。我提交表单时，所有新变体都应发送到后端。您能给我一些建议还是提供一些技巧？一般来说，我对EmberJS和JS还是陌生的，这种帮助肯定会减少我在学习过程中的努力。我在下面放置一些代码。

型号：

export default DS.Model.extend(Validations, {
  uniqueId: DS.attr('string'),
  name: DS.attr('string'),
  defaultPrice: fragment('price'),
  venue: DS.belongsTo('venue'),
  deleted: DS.attr('boolean'),
  productType: DS.attr('string'),

  productCategory: DS.belongsTo('product-category', {async: false}),
  productVariants: DS.hasMany('product-variant', {async: false}),
});

export default DS.Model.extend({
  uniqueId: DS.attr('string'),
  name: DS.attr('string'),
  fullName: DS.attr('string'),
  price: fragment('price'),
  weighted: DS.attr('boolean'),
  openPrice: DS.attr('boolean'),

  product: DS.belongsTo('product')
});

产品形式：

export default Component.extend({
  store: service(),

  categories: computed(function(){
    return this.store.findAll('product-category', {
    });
  }),

  init() {
    this._super(...arguments);
    this.productTypes = ['PRODUCT_WITH_RECEPTURE', 'SET_AS_ONE_ITEM', 'SET_AS_SEPARATE_ITEMS', 'PIZZA'];
    this.currencies = ['PLN', 'EUR', 'USD'];
  },


  actions: {
    chooseCategory(category){
      let product = this.get('model');
      product.set('productCategory', category);
      this.set('productCategory', category);
    },

    chooseProductType(option){
      let product = this.get('model');
      product.set('productType', option);
      this.set('productType', option);
    },

    chooseCurrency(currency){
      let product = this.get('model');
      product.set('defaultPrice.currency', currency)
      this.set('currency', currency)
    },

    saveProduct(param){
      this.sendAction('action', param);
    }
  }
});

及其组成部分：

<div class="form-horizontal">
  <div class="col-sm-10">
    {{#validated-input model=model valuePath='name' placeholder='Nazwa'}}{{/validated-input}}
  </div>
  <div class="col-sm-10">
    {{#validated-input model=model valuePath='defaultPrice.amount' placeholder='Koszt'}}{{/validated-input}}
  </div>
  <div class="col-sm-10">
    <div class="form-group">
      <label class="col-sm-2 control-label">Kategoria</label>
      {{#power-select
        selected=model.productCategory
        options=categories
        onchange=(action "chooseCategory") as |productCategory|}}
        {{productCategory.name}}
      {{/power-select}}
    </div>
  </div>
  <div class="col-sm-10">
    <div class="form-group">
      <label class="col-sm-2 control-label">Waluta</label>
      {{#power-select
        options=currencies
        selected=model.defaultPrice.currency
        onchange=(action "chooseCurrency") as |currency|}}
        {{currency}}
      {{/power-select}}
    </div>
  </div>
  <div class="col-sm-10">
    <div class="form-group">
      <label class="col-sm-2 control-label">Typ produktu</label>
      {{#power-select
        options=productTypes
        selected=model.productType
        onchange=(action "chooseProductType") as |productType|}}
        {{productType}}
      {{/power-select}}
    </div>
  </div>
  {{#product/product-variant-form item=model}}{{/product/product-variant-form}}
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary" {{action 'saveProduct' model}}>Zapisz</button>
    </div>
  </div>
</div>

产品变体形式：

<legend>Warianty</legend>
<table class="table table-hover">
  <thead>
  <tr>
    <th>Nazwa</th>
    <th>Cena</th>
    <th>Dostępność</th>
  </tr>
  </thead>
  <tbody>
  {{#each item.productVariants as |productVariant|}}
    <tr>
      <th>{{input type="text" value=productVariant.fullName class="form-control"}}</th>
      <th>{{input type="text" value=productVariant.price.amount class="form-control"}}</th>
      <th class="center-check-box">{{input type="checkbox" checked=productVariant.openPrice class="form-control"}}</th>
    </tr>
  {{/each}}
  <button {{action 'addVariant'}}>Dodaj wariant</button>
  </tbody>
</table>

及其组成部分：

export default Component.extend({

  store: service(),

  init() {
    this._super(...arguments);
    this.variants = [];
  },

  actions: {
    addVariant() {
      let product = this.get('model');
      console.log(product);
      let variant = this.store.createRecord('product-variant', {
        name: '',
        price: this.get('store').createRecord('price')
      });
      this.get('variants').pushObject(variant);
    }
  }
});

Answer 1

您似乎没有将变体与产品相关联，之后也没有保存它们。有一个example of this in the Ember documentation。应该是这样的：

let product = this.get('model');
let variant = this.store.createRecord('product-variant', {
  name: '',
  price: this.get('store').createRecord('price')
});

product.get('productVariants').pushObject(variant);

variant.save().then(function () {
  product.save();
});

与表单保存hasMany关系

1 个答案: