How do you serialize Ember objects?

Question

I need to use localStorage to store some Ember objects. I notice that Ember objects have properties with names like __ember1334992182483 . When I call JSON.stringify() on Ember objects, these __ember* properties __ember* not serialized. Why is this? I am not saying that I want to serialize these properties. I'm just curious what exactly they are and how they are implemented so that they are not serialized.

I am using cycle.js ( https://github.com/douglascrockford/JSON-js/blob/master/cycle.js ) to encode my data structures containing duplicate links into a string that can be used to restore the original data structures. He allows you to do this:

 a = {a:1} b = {b:1} c = [[a, b], [b, a]] foo = JSON.stringify(JSON.decycle(c)) // "[[{'a':1},{'b':1}],[{'$ref':'$[0][1]'},{'$ref':'$[0][0]'}]]" JSON.retrocycle(JSON.parse(foo)) // reconstruct c 

For Ember objects, I can do the same, but I also need to pass the deserialized objects to Ember.Object.create() , because they are deserialized like regular JavaScript objects.

Is this the best way to serialize / deserialize Ember objects? Is there a recommended technique for this?

Answer 1

For serialization and deserialization, you can do something in this direction, see http://jsfiddle.net/pangratz666/NVpng/ :

 App.Serializable = Ember.Mixin.create({ serialize: function() { var propertyNames = this.get('propertyNames') || []; return this.getProperties(propertyNames); }, deserialize: function(hash) { this.setProperties(hash); } }); App.Person = Ember.Object.extend(App.Serializable, { propertyNames: 'firstName title fullName'.w(), fullName: function() { return '%@ %@'.fmt(this.get('title'), this.get('firstName')); }.property('firstName', 'title') }); var hansi = App.Person.create({ firstName: 'Hansi', title: 'Mr.' }); // { firstName: 'hansi', title: 'Mr.', fullName: 'Mr. Hansi' } console.log( hansi.serialize() ); var hubert = App.Person.create(); hubert.deserialize({ firstName: 'Hubert', title: 'Mr.' }); console.log( hubert.serialize() );​ 

---

UPDATE . Also consider a similar question Ember Model for json

Answer 2

I would use ember data and write a data warehouse adapter for this.

Answer 3

I have:

• corrected and simplified code
• added circular reference prophylaxis
• added use get value

• removed all default properties of an empty component

   //Modified by Shimon Doodkin //Based on answers of: @leo, @pangratz, @kevin-pauli, @Klaus //http://stackoverflow.com/questions/8669340 App.Jsonable = Em.Mixin.create({ getJson : function (keysToSkip, visited) { //getJson() called with no arguments, // they are to pass on values during recursion. if (!keysToSkip) keysToSkip = Object.keys(Ember.Component.create()); if (!visited) visited = []; visited.push(this); var getIsFunction; var jsonValue = function (attr, key, obj) { if (Em.isArray(attr)) return attr.map(jsonValue); if (App.Jsonable.detect(attr)) return attr.getJson(keysToSkip, visited); return getIsFunction?obj.get(key):attr; }; var base; if (!Em.isNone(this.get('jsonProperties'))) base = this.getProperties(this.get('jsonProperties')); else base = this; getIsFunction=Em.typeOf(base.get) === 'function'; var json = {}; var hasProp = Object.prototype.hasOwnProperty; for (var key in base) { if (!hasProp.call(base, key) || keysToSkip.indexOf(key) != -1) continue; var value = base[key]; // there are usual circular references // on keys: ownerView, controller, context === base if ( value === base || value === 'toString' || Em.typeOf(value) === 'function') continue; // optional, works also without this, // the rule above if value === base covers the usual case if (visited.indexOf(value) != -1) continue; json[key] = jsonValue(value, key, base); } visited.pop(); return json; } }); /* example: DeliveryInfoInput = Ember.Object.extend(App.Jsonable,{ jsonProperties: ["title","value","name"], //Optionally specify properties for json title:"", value:"", input:false, textarea:false, size:22, rows:"", name:"", hint:"" }) */