vendredi 29 janvier 2016

Localstorage service is not notifying of property changes

I have a local storage service I've created which looks like this

import Ember from 'ember';
import ENV from 'bidr/config/environment';

const stringify = JSON.stringify;
const parse = JSON.parse;

function setItem(key, value) {
  localStorage.setItem(key, stringify(value));
}

function getItem(key) {
  var result = localStorage.getItem(key);
  if (result) {
    return parse(result);
  }
}


export default Ember.Service.extend({
  namespace: ENV.APP.LocalStorageKey,
  user: null,

  init: function() {
    this.set('user',this.getItem('user'));
  },

  setItem: function (key, object) {
    var ttlOptions = arguments[2];

    if (ttlOptions) {
      this._setTTLKey(key, ttlOptions);
    }
    this.set(key,object);
    setItem(this._namespacedKey(key), object);
  },
  getItem: function (key) {
    return getItem(this._namespacedKey(key));
  },
  keyExpired: function (key, now) {
    var ttl = this.getItem(`_ttl_${key}`);
    if (ttl) {
      var expiry = new Date(ttl.lastUpdated)
          .setTime(new Date(ttl.lastUpdated)
          .getTime() + ttl.ttl);

      now = now || new Date();

      return now > expiry;
    }
    return true;
  },
  _setTTLKey: function (key, ttlOptions) {
    var dateTime = new Date();
    setItem(this._namespacedKey(`_ttl_${key}`),
      {ttl: ttlOptions.ttl, lastUpdated: dateTime}
    );
  },
  _namespacedKey: function (key) {
    return this.get('namespace') + `.${key}`;
  }
});

The user object is so I can access it directly in a template or as a computed property value.

The problem is another computed property that depends on a property of user in the service is not being notified when it gets changed. In my application controller I have an action that updates a property on the user property in the service

updateActiveEvent(eventInfo) {
    var currentUserInfo = this.get('localStorage').getItem('user');
    currentUserInfo.active_auction = eventInfo.eid;
    this.get('localStorage').setItem('user',currentUserInfo);
},

(this comes in from a socket service) this is working properly as after this action fires I can check the browsers localstorage object and see the active_auction property of it has changed. But in my template where I am displaying that (or a computed property based on that) it's not updating.

I saw there is possibly a way I can force ember to notify of property changes but couldn't seem to get this to work, not sure if I was doing it right.




Aucun commentaire:

Enregistrer un commentaire