How to use Backgrid.js and the Parse.com Javascript SDK

Create a Backgrid populated with data from Parse.com and have it auto save back to Parse when a field is edited:

//load my Parse.com Class called "parts"
var Part = Parse.Object.extend("parts", {
  //save the data back to parse.com when it changes
  initialize: function() {
    Parse.Object.prototype.initialize.apply(this,arguments); this.on("change", function (model,options) {
     if (options && options.save === false) return;
     model.save()
    });
  }
});

var Parts = Parse.Collection.extend({
  model: Part
});

var columns = [{
    name: "id",
    label: "ID",
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
}, {
    name: "name",
    label: "Name",
    cell: "string"
}, {
    name: "description",
    label: "description",
    cell: "string"
}];

var parts = new Parts();

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

// Render the grid and attach the root to your HTML document
$("#results-grid").append(grid.render().el);

// Fetch some countries from the url
parts.fetch({reset: true});

Comments

One response to “How to use Backgrid.js and the Parse.com Javascript SDK”

  1. Nuno Marques

    Hi, I’m trying to use Backgrid 0.3.5 with Parse JS SDK 1.4.2 but getting these errors:

    ‘Uncaught TypeError: Cannot read property ‘$’ of undefined’
    on this line: var $ = Backbone.$;

    So I tried aliasing: Backbone = Parse; Backbone.Model = Parse.Object;

    and instead I get

    Uncaught Error: Parse.Object.extend’s first argument should be the className.

    Probably because Parse.Object.extend differs from Backbone.Model.extend

    Can you suggest a way to deal with this and get backgrid and parse.com working together?

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *