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.

could be something with `Backbone.Pageable`. Please see [this](http://jsfiddle.net/sameer_kc/xuGSr/38/), just with `Backbone.Collection` which seems to be working — Sami, Jun 26 '15 at 11:05
I see. I did it as your given reference link but I fetch my data from json file and here in example it is dynamically created. my json have 14 entry still I got 0 entry. so is there any issue to fetch out from json file or may be my method is not correct to collect info from json — Jay Patel, Jun 26 '15 at 11:50

Sami · Answer 1 · 2015-06-29T09:25:09.163

0

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")});
             });
         }
});

edited Jun 29 '15 at 09:25

answered Jun 26 '15 at 14:29

Sami

3,926
1
29
42

I used ajaxSync:true option with collection instance and it fetch json data but still localstorage is not working. – Jay Patel Jun 29 '15 at 05:46
what do you mean by localstorage is not working. What do you want to do in localstorage? – Sami Jun 29 '15 at 07:24
when I add some new item and refresh page that new item should be displayed. – Jay Patel Jun 29 '15 at 07:29
so as i get you, you want to initially load some data from json file then save all those data into localstorage and whenever you create a new item you want to save the new item to localstorage too. – Sami Jun 29 '15 at 07:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81854/discussion-between-sami-and-jay-patel). – Sami Jun 29 '15 at 10:32
I applied your code and I got localStorage but I am still facing issue to display localStorage data in backgrid after reload page. – Jay Patel Jul 01 '15 at 09:30

Local storage use in Backgridjs

1 Answers1