How you guys manage create or edit data with one component

Ember Data
1

Hi guys, I have been wondering if my approach is right or wrong. I got one component for editing and creating. Eg: place-form component. So in order to edit i pass isUpdate prop to component like {{place-form isUpdate=true}} and in action i check if is update it’s editing, or it’s creating. I saw some people create route called new and edit hence when user visit to edit route on model hook it was this.store.createRecord('place') and set props in template file such as model.set('title', 'lOrem ipsum') but is it really right approach??

2

I usually do something like this:

For creating:

{{place-form place=newPlace onsave=(action "createPlace")}}

For editing:

{{place-form place=place onsave=(action "updatePlace")}}

This way you don’t have to pass in an isUpdate property and have branching logic.

2 Likes
3

looks nice. What’s with that newPlace is it model?

4

If the object passed to the component is a ember-data model, it has properties that let it know if it is a new or existing object. Ember Data needs to know whether to post or put. We use it for conditionally setting a UI label and to also properly roll back if the user cancels the create/update.

1 Like
5

newPlace would be the newly created place record, i.e. this.store.createRecord('place', {})

1 Like
6

i wonder, in that case ember trigger warning/error to not have any id ???

7

Usually you don’t call createRecord with an id since that is generated on the server.

8

ok, thanks for the answer

9

what i don’t understand is why this one gives me an error??? Ember Twiddle

10

Your index route’s model hooks needs to return an object. Right now model is undefined.