EmberJS saving data

Question

My App uses Fixture data (will port to Localstorage later) and I need to implement 'save' method depending on a user click. The user click is an action that maps to the View and from therein the view, it gets transferred to the controller in order to persist info to the model, essentially the template has:

<button {{action 'save' this target='view'}}>Save</button>  <!-- note that the 'this' keyword I am sending corresponds to a specific instance of the model that is in a collection, done using an {{#each model}} loop

The view has

actions:{
    save:function(card){
       // perform some UI activity
       this.get('controller').send('save',card); // card representing 'this'
    }
}

The controller has:

actions:{
    save:function(card){
       console.log("controller reached"); // does execute
       card.save(); // spits out an error
    }
}

Everything works fine however the card.save() method call does not work in the controller. I mean, all I am trying to do is to persist the specific 'card' to my data, but it keeps spitting:

Uncaught TypeError: Object # has no method 'save'

What am I missing here ?

Side notes:

The Controller returns a collection of models
The corresponding'view' for the controller also has the 'edit' partial loaded in it. So when the user chooses to 'edit' a specific model, it doesn't transition into a different URL, rather it loads the 'editing' form within the same URL.
This means that the model in this specific controller is essentially the collection and I only want to save the specific model that is being edited.

Can you show me the class for the this? App.SomeRecord = Ember.Object.... — Kingpin2k
Sure, I am using Fixture data. Here is a sample: App.Card.FIXTURES = [ { id : 1, front: "What is the purpose of Ember Store? ", back: "Holds the loaded models and retrieves models that have not yet been loaded", stack_id: 1 }, ... — Parijat Kalia
Oh that's pretty basic: App.StackCardsRoute = Ember.Route.extend({ model: function(){ return App.Card.FIXTURES ; } }) It is StackCards route since 'cards' is defined under the 'stack' resource :) — Parijat Kalia

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-02T21:40:54

It appears as if you aren't using any client side record management library (such as ember-data or ember-model). That being said, your instances of App.Card aren't really instances of anything, they are just POJOs and there is no save method defined on a POJO.

It sounds like you'll want to do some research into ember data, or ember model (I'd suggest ember data, http://emberjs.com/guides/models/)

If you don't want to use either, you can just use ajax calls to save data:

save:function(card){
   console.log("controller reached"); // does execute
   //       card; // spits out an error
   $.ajax({... , data:$(card), ...});
}

If it's fixture and you have no intention of saving it anywhere, and it's just a dry run, add an ugly alert or log

save:function(card){
   console.log("controller reached"); // does execute
   console.log('pretend to save ' + card);
   alert('pretend to save ' + card);
}

EmberJS saving data

1 Answers