How to create a new instance of a model to pass to a component?

Ember Data
1

I’m trying to create a new instance of a model so that I can pass it into a component. The component is a form that needs the model to check validations (I’m using ember-cp-validations).

I tried this:

 // route
export default Ember.Route.extend({
     model: function() {
       return this.store.createRecord('example');
     }
 });

   // template.js
{{example/create-form
              model=model
              submitForm=(action 'submit')}}

 // model
export default DS.Model.extend(Validations, {
  name: DS.attr('string'),
  problems: DS.hasMany('string')
});

But the model returns null. So even if I have the component pass the model back down along with closure action, I cannot access that same model instance to save it’s properties. I have to create another new instance of the model in order to get it to work but that just feels wrong.

  submit(model, name) {
      // this.get('model').get(name)); //returns error cannot use get of null 
      // create another record
      let exampleTwo = this.get('store').createRecord('example', { name: name});
      exampleTo.save();
    }

Is there a better way to pass new instances of models along to components using ember data?

2

The scenario you’ve described sounds like it should work and I created a working twiddle based on your description. Can you create a minimal example the reproduces the issue?

1 Like
3

Thanks for taking the time to create the twiddle.

What I meant was 1) passing an empty instance of a model to a component (since you will be getting its values from the the input form) 2) passing that model back to the controller so that it can set and save the model

Here’s a twiddle.

Given that your approach worked, it seems the the issue is with point #1, as the model is returning null. I figured that even if I created an empty record, it would still have a reference by its id.

How else could I handle this?