Question

以下作品。我可以使用我的组件来保存新地址。成功承诺解决后，它会转换到相同的路线：_this.transitionToRoute('checkout.address.index')

问题是，表单仍包含新地址的相同值。我需要形成要清除。我该怎么做？

// Controller
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function(address) {
      var _this = this;

      this.store.createRecord('address', address.getProperties('address1', 'address2', 'city', 'postalCode')).save().then(function(){
        _this.transitionToRoute('checkout.address.index');
      }, function() {
        // Need this promise, so we can render errors, if any, in the form
      });
    }
  }
});

// Template
{{address-form action='save'}}

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  address: function() {
    return Ember.Object.create();
  }.property(),

  actions: {
    save: function() {
      this.sendAction('action', this.get('address'));
    }
  }
});

// Component template
<form {{action 'save' on='submit'}}>
  <p>
    <label>Address:
      {{input value=address.address1 placeholder='11 Mars Street'}}
    </label>

    {{#each error in errors.address1}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    {{input value=address.address2 placeholder='Bel Air 1 Village'}}

    {{#each error in errors.address2}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>City:
      {{input value=address.city placeholder='Makati'}}
    </label>

    {{#each error in errors.city}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Postal code:
      {{input value=address.postalCode placeholder='1209'}}
    </label>

    {{#each error in errors.postalCode}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <input type='submit' value='Next'/>
  <button {{action 'cancel'}}>Cancel</button>
</form>

Answer 1

我建议这样的事情（注意，为了便于阅读，编写了一些代码）：

export default Ember.Controller.extend({
  actions: {
    save: function(address, component) {
      var controller = this;
      var addressProperties = address.getProperties('address1', 'address2', 'city', 'postalCode');
      var newAddress = controller.store.createRecord('address', addressProperties);

      function onSuccess() {
        controller.transitionToRoute('checkout.address.index');
        component.reset());
      }

      function onFailure() {
        // Need this promise, so we can render errors, if any, in the form
      }

      newAddress.save().then(onSuccess, onFailure);
    }
  }
});

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  address: function() {
    return Ember.Object.create();
  }.property(),

  reset: function() {
    this.set('address', Ember.Object.create());
  },

  actions: {
    save: function() {
      var component = this;
      component.sendAction('action', component.get('address'), component);
    }
  }
});

如何清除组件表单？

1 个答案: