CODEWITHSUNDEEP
ember.jsember-data
amique
amique

Reputation: 2226

emberjs Cannot clone an Ember.Object that does not implement Ember.Copyable

I am using ember 1.3.1 and ember-data 1.0.0-beta.5. On creating new mode I get following error

Assertion failed: Cannot clone an Ember.Object that does not implement Ember.Copyable

Following is my model code

App.myModel = DS.Model.extend({ name : DS.attr('string'), age : DS.attr('string') });

In my create route model function

return Em.Object.create({});

and finally on save I do following

this.store.createRecord('property', this.get('model'));

Although despite the error, my backend service is called successfully and new model is saved.

Please guide.

Thanks

Upvotes: 16

Views: 7676

Answers (4)

fmendez
fmendez

Reputation: 7338

For the sake of completeness, in the scenario described by @acidleaf this is the solution offered by Yehuda Katz from the ember core team in this video:

Off the Menu: Building a Client-Side With Ember and Rails - Yehuda Katz @ Rails Israel 2013

In the route from which you're returning a list of resources to display (i.e the plural version of the resource StoriesRoute, PostsRoute, etc..), you'll returned a filtered list containing those which are not new:

model: function() {
  this.store.find('myModel');
  return this.store.filter('myModel',function(myModel){
    return !myModel.get('isNew');
  });
}

Upvotes: 6

acidleaf
acidleaf

Reputation: 21

I have ran into this problem while learning Ember. The accepted answer works, but it first creates a new empty record in the store. This was not desired in my application as it displays the empty record in my view.

My Solution

Router

App.ItemsNewRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('content', {});
  }
});

Controller

App.ItemsNewController = Ember.ObjectController.extend({
  actions: {
    save: function() {
      this.store.createRecord('item', {
        title: this.get('newTitle'),
        category: this.get('newCategory')
      }).save();
      this.transitionToRoute('items');
    }
  }
});

Template

<script type="text/x-handlebars" data-template-name="items">
<ul class="list-group">
  {{#each}}
    <li class="list-group-item">{{title}} - {{category}}</li>
  {{/each}}
  {{outlet}}

  <li class="list-group-item">{{#link-to "items.new"}}Add{{/link-to}}</li>
</ul>
</script>

<script type="text/x-handlebars" data-template-name="items/new">
<li class="list-group-item">
  {{input class="form-control" value=newTitle placeholder="Title"}}
  {{input class="form-control" value=newCategory placeholder="Category"}}
  <button class="btn btn-default" {{action "save"}}>Save</button>
</li>
</script>

Upvotes: 2

Mario
Mario

Reputation: 369

I had the same issue which I fixed by doing the following:
In the model function of the route replace

return Em.Object.create({});

with

return this.store.createRecord('myModel');

and on save replace

this.store.createRecord('myModel', this.get('model'));

with

this.get('model').save();

Upvotes: 10

Shimmi
Shimmi

Reputation: 41

I am quite new to Ember and still trying to catch all problems caused when migrating to newer versions of Ember and Ember Data, but...

On one hand I think you have a mistake in last code block and that it should be:

this.store.createRecord('myModel', this.get('model'));
// myModel instead of property

But on the other hand I dont think this will be the problem :-/

anyway, try to look (and compare) to changes for Ember data here: https://github.com/emberjs/data/blob/master/TRANSITION.md and also on this http://discuss.emberjs.com/t/createrecord-using-this-get-model-throws-an-error/3968 or similiar

hope it helps!

J.

Upvotes: 3

Related Questions