I'am creating a form inside my Addon that will save the record in the store and also will send a JSON object through a post api call to a rails backend.
My issue is that the method "createRecord" doesn't get overwritten by a custom one inside my adapter. It basically creates the record, but by using the default "createRecord" ember-data method.
addon/adapters/trade.js
import Ember from 'ember';
import ApplicationAdapter from '../adapters/application';
export default ApplicationAdapter.extend({
createRecord: function(store, type, snapshot, trade) {
debugger;
console.log('bla')
}
});
app/adapters/trade.js
export { default } from 'ember-p/adapters/trade';
addon/models/trade.js
import DS from 'ember-data';
export default DS.Model.extend({
offer: DS.belongsTo('offer', {async: true}),
firstName: DS.attr('string'),
lastName: DS.attr('string'),
streetName1: DS.attr('string'),
streetName2: DS.attr('string'),
city: DS.attr('string'),
state: DS.attr('string'),
zipcode: DS.attr('string'),
telephone: DS.attr('string'),
email: DS.attr('string')
});
addon/routes/checkout.js
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
createTrade: function (trade) {
this.store.createRecord('trade',trade);
this.transitionTo('thanks');
},
}
});
app/templates/checkout.hbs
{{ p-address createTrade="createTrade" }}
app/templates/components/p-address.hbs
{{yield}}
<h1>Address form</h1>
<form {{action 'createTrade' value="target.value" on="submit"}}>
<div class="form-group">
{{input type="text" placeholder="First name" value=firstName}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="Last name" value=lastName}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="Street name 1" value=streetName1}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="Street name 2" value=streetName2}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="City" value=city}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="State" value=state}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="Zipcode"value=zipcode}}
</div>
<br>
<div class="form-group">
{{input type="text" placeholder="Telephone" value=telephone}}
</div>
<br>
<div class="form-group">
{{input type="submit" value="submit"}}
</div>
</form>
You don't call createRecord
on the adapter but on the store itself. You can override the service:store
as well, if you really want that, but why would you do that?
export default DS.Store.extend({
createRecord() {
this._super(...arguments);
debugger;
}
});
The adapter is an adapter between the store and the backend. So it won't know when the record is created but only when it gets saved. To save the record call .save()
on it:
this.store.createRecord('trade',trade).save(); // will return a promise