Unable to get property 'collection' of undefined or null reference when calling sync();

[Liero]

when I call myModel.sync(), I'm getting

Unable to get property 'collection' of undefined or null reference

import { Model } from 'backbone';
import { LocalStorage } from 'backbone.localstorage';

class UserModel extends Model {
    constructor() {
        super();
        this.localStorage = new LocalStorage('api/Account');
    }
    url() {  return "/api/Account"   }
    sync(){
        return super.sync();
    }
    fetch() {
        return super.fetch({
            crossDomain: true, 
            xhrFields: {
                withCredentials: true
            },
            ajaxSync: true,            
        });
    }
    save() {
        return super.save({}, { ajaxSync: false });
    }
}

My scenario is, that I have a readonly REST Resource api/Account that returns info about current user. I want to support offline scenarios. I thought I can call synch at the app startup and it would load info about current user and store it in localstorage

[scott-w]

Hi @Liero

This might be because Backbone doesn't have good support for being treated as an ES6 class. Try the following:

import { Model } from 'backbone';
import { LocalStorage } from 'backbone.localstorage';

const UserModel = Model.extend({
  localStorage = new LocalStorage('api/Account'),

  url: '/api/Account',

  fromServer() {
    return this.fetch({
      crossDomain: true,
      xhrFields: {
        withCredentials: true
     },
     ajaxSync: true
    });
  }
})

Then, instead of calling fetch, you call fromServer so you have the option to retrieve your credentials from Local Storage elsewhere in your app from the model.