Local storage use in Backgridjs

Question

I make app using backbone js(Marionette Framework) with other functionality like Backgrid,backbone local storage, Backbone Radio, epoxy, Backbone relational model.

What is the issue ?

When I am using localstorage functionality in my Backbone collection then it show me blank table in my view.

  var UserModel = require('./user-model');
  var BackgridFilter = require('backgrid.filter');
  var BackgridPaginator = require('backgrid.paginator');
  var BackgridSelectFilter = require('backgrid.selectfilter');
  Backbone.localStorage = require('backbone.localstorage');

  var UserCollection = Backbone.PageableCollection.extend({
    model: UserModel,
    mode: "client"
    localStorage: new Backbone.LocalStorage("UserCollection"),
  });

  var UserC = new UserCollection();

  // here I make json file manually and call it out 
  UserC.fetch({ 
    url: "/javascript/app/user-groups/user.json"
  });

  return UserC;

when I comment it out localStorage line then it show me list of data in table but then ofcourse localstorage is not working.

Here is Backgrid call

     // Initialize column structure for backgrid table
      var columns = [{
        name: "name",
        label: "Name",
        cell: "string",
        direction: "descending",
        editable:false
      }, {
        name: "role",
        label: "Role",
        cell: RoleCell,
        editable:false
      },
      {
        name: "group",
        label: "Group",
        cell: GroupCell,
        editable:false
      },
      {
        name: "application",
        label: "Application",
        cell: ApplicationCell,
        editable:false 
      }];

      var uCollection = this.collection;

      // Initialize a new Grid instance
      var grid = new Backgrid.Grid({
        columns: columns,
        collection: uCollection
      });

      this.ui.userTable.append(grid.render().el);

What I want to do

When I add 1 more item in my table on run time and refresh page that new item need to be visible after refresh page. but because I can't use localstorage in my backgrid collection.

so if do you have any idea how can I use localstorage functioanlity in my backgrid js or any refernce which can help tp solve out my issue. it will be great help.

thanks.

Answer 1

Above it is trying to fetch the collection from local storage. If you want to use url instead of localstorage use {ajaxSync: true}

From https://github.com/jeromegn/Backbone.localStorage

If needed, you can use the default Backbone.sync (instead of local storage) by passing the ajaxSync option flag to any Backbone AJAX function, for example: myModel.fetch({ ajaxSync: true });

Edit:

Since you are fetching from url using ajaxSync, you don't have a collection in localstorage yet. So while you fetch collection from url, create a collection in localstorage too in success function.

Collection.create should create model in your localstorage unless you specify ajaxSync=true

var UserCollection = Backbone.PageableCollection.extend({
    model: UserModel,
    mode: "client",
    url: "/javascript/app/user-groups/user.json",
    localStorage: new Backbone.LocalStorage("UserCollection"),
});

var UserC = new UserCollection();

// here I make json file manually and call it out 
UserC.fetch({ 
         ajaxSync: true,
         success: function(collection){
             collection.each(function(model){
                  UserC.create({id: model.get("id"), field: model.get("field")});
             });
         }
});