Relations lost on page reload

[alexdpunkt]

Models:

• List
• Item

Actions:

• Create List
• Add items to that list

When you add some items to the list, they get added correctly and if you reload the page, the list and the items are loaded correctly.

BUT if you then add more items to the list and reload the page again, all relations are lost! The items remain in the store, but in the list the items property is gone.

Demo page: http://jsbin.com/oKuPev/72

To reproduce:

1. Create a list
2. add some items
3. hit reload
4. add some more items
5. hit reload again

[abuiles]

@adick I'm going through a similar issue, I create a record and all good. But when I add/edit some of the record and save, all the changes disappear after reloading the page.

[justinross]

I think this is the same issue I've been experiencing.

What's weird is, on your jsbin, if I create a list, and add some items, then refresh, the items are still there. As you specify, it's the adding items after refresh that cause the relationships to get wiped out on refresh. Basically, adding the new items after refresh completely wipes out the "items" hasMany property from the browser storage.

The issue I was running into, though, was that the "items" field (or whatever hasMany property I'm using) doesn't appear to be saved properly to begin with. I'm not quite good enough with all this, though, to know whether I was screwing something up, or it was a bug with LSA. Glad to hear I might not have been fully to blame. :)

/edit: Also, it looks like you don't have to add items to the list before refreshing. If you add a list, then refresh, then add items, then refresh again, those items will be gone.

I'm investigating further, but I don't think I know enough about all of this to have much hope at finding the actual issue, let alone resolving it.

/edit 2: Further investigation.

So, it would appear that when you add an item to the hasMany property of a fresh record (read: before you refresh the page, reloading it from localstorage), it would appear that it is saving the children of that property by id:

{
    "App.List": {
        "records": {
            "qh2ul": {
                "id": "qh2ul",
                "name": "The list",
                "items": [
                    "251bl"
                ]
            }
        }
    },
    "App.Item": {
        "records": {
            "251bl": {
                "id": "251bl",
                "name": "item 1",
                "list": "qh2ul"
            }
        }
    }
}

If, however, you add items after refreshing, it adds them as embedded items:

{
    "App.List": {
        "records": {
            "qh2ul": {
                "id": "qh2ul",
                "name": "The list",
                "items": [
                    {
                        "name": "item 1",
                        "list": "qh2ul"
                    },
                    {
                        "name": "item 1",
                        "list": "qh2ul"
                    }
                ]
            }
        }
    },
    "App.Item": {
        "records": {
            "251bl": {
                "id": "251bl",
                "name": "item 1",
                "list": "qh2ul"
            },
            "4uosj": {
                "id": "4uosj",
                "name": "item 1",
                "list": "qh2ul"
            }
        }
    }
}

/edit: So, the above only happens if you:

1. Create a new list.
2. Refresh before adding any items to it.
3. Add one or more items.

If you create a list, add items, refresh, then add more items, the "items" property of the list is simply not saved at all.

[alexdpunkt]

@justonross thanks for investigating it! It may have also something to do with ember data, I'm not sure if this is caused by the localstorage adapter.

This whole thing (in conjunction with ember data) bugged me long enough to give up... now I use ember model with server-side session storage instead. https://github.com/ebryn/ember-model

[abuiles]

@adick @justinross After investigating further I found that the issue for me at least was related with the serialization of the object.

The call to toJson here https://github.com/rpflorence/ember-localstorage-adapter/blob/master/localstorage_adapter.js#L89 was failing, I think my model wasn't picking up the serializer. What I did as a temporarily workaround was overriding toJSON.

  toJSON: (options = {})->
    if options.includeId?
     {
        id: this.get('id'),
        name: this.get('name'),
      }
    else
     {
        name: this.get('name'),
        description: this.get('description'),
      }

Now it is saving the changes and persisting across refresh.

[kurko]

fyi, #30 will fix this.

[hussfelt]

This problem is back, for me at least...
I'm using:

• ember-data 1.0.0-beta.8.2a68c63a
• LSAdapter 0.4.0 - https://raw.githubusercontent.com/kurko/ember-localstorage-adapter/0.4.0/localstorage_adapter.js

The relations does not persist through a reload of the application...

[hussfelt]

They discussed it here as well: http://discuss.emberjs.com/t/ember-data-fixture-adapter-saving-record-loses-has-many-relationships/2821/3

I tried implementing the new serializeHasMany, which showed me that the actual data in the localStorage is empty in the relation:

   "delivery":{  
      "records":{  
         "1":{  
            "id":"1",
            // ...
            "locations":[  
                        // This is empty...
            ]
         }
      }
   },

The app works like it should though - seems that the models know about the relations.

[hussfelt]

Updated to ember-data 1.0.0-beta.11 - still the same issue.
Dunno why I was using an old version. :-( 😞

[hussfelt]

It feels like there is something wrong with what I am doing when I load my fixtures.

[hussfelt]

I also had to implement a new serializeHasMany function like the others on the interwebz.
One modification to get it working with the current ember-data was to use the "record.constructor" instead of "DS.RelationshipChange".

See below:

DS.JSONSerializer.reopen({
    serializeHasMany : function(record, json, relationship) {
        var key = relationship.key;

        var relationshipType = record.constructor.determineRelationshipType(
                record.constructor, relationship);

        if (relationshipType === 'manyToNone'
                || relationshipType === 'manyToMany'
                || relationshipType === 'manyToOne') {
            json[key] = Ember.get(record, key).mapBy('id');
            // TODO support for polymorphic manyToNone and manyToMany
            // relationships
        }
    }
});

[hussfelt]

Added a separate issue on this:
#90

Feel free to point me to ember-data if that's the issue.