Use Backgrid with Meteor

Question

How would one go about integrating Backgrid with Meteor? I'm using the meteor package productiveme:meteor-backgrid which uses the latest Backgrid version but no documentation for usage in meteor. My two main questions are these:

Question #1

How do I convert a Meteor/MongoDB collection or cursor to a Backbone collection to populate the table? (the publish/subscribe functions are correct and the data can be successfully accesses outside of Backgrid)

Question #2

Since Backgrid is initiated via javascript and not a template situation, am I doing this in the most "meteoric" way?

Template.customers.onRendered(function() {

    var project_id = Session.get('current_project')._id;
    var allCustomers = Customers.find({'project': project_id}).fetch();

    var columns = [
        {
            name: 'name',
            label: 'Name',
            cell: 'string'
        },
    ];
    var grid = new Backgrid.Grid({
        columns: columns,
        collection: allCustomers,
    });

    $("#table-container").append(grid.render().el);
});

Here's the error from the console:

TypeError: obj[implementation] is not a function
at _.each.Events.(anonymous function) [as listenTo] (http://mb-air.local:3000/packages/productiveme_backgrid.js?7cf0e8ad9ae9ed918329b72c89c983e50097c6f6:282:26)
at Backgrid.Body.Backbone.View.extend.initialize (http://mb-air.local:3000/packages/productiveme_backgrid.js?7cf0e8ad9ae9ed918329b72c89c983e50097c6f6:4014:10)

Try Customers.find({'project': project_id}).fetch() instead since .find() return a cursor and not an array of docs. — praneybehl, Oct 20 '15 at 01:12
Nope, doesn't seem to change the result. I've updated the question with the error. I think it has to be a Backbone instance, but I'm not too familiar with Backbone. — Scott, Oct 20 '15 at 04:41
Apologies, `.fetch()` did help, it just wasn't the whole issue. — Scott, Oct 20 '15 at 17:32

score 0 · Answer 1 · answered Oct 20 '15 at 17:30

Well, I was able to solve Question #1 by setting up some dummy Backbone models and collections like this:

var allCustomers = Customers.find({'project': project_id}).fetch();

var MyModel = Backbone.Model.extend({
    defaults: {
        id: null,
        name: null,
    }
});

var MyCollection = Backbone.Collection.extend({
    model: MyModel,
    initialize: function(models, options) { }
});

var myCollections = new MyCollection(allCustomers);

var columns = [
    {
        name: 'name',
        label: 'Name',
        cell: 'string',
        editable: false,
    },
];
var grid = new Backgrid.Grid({
    columns: columns,
    collection: myCollections,
});

$("#table-container").append(grid.render().el);

BUT the table is not reactive. I'm still learning Meteor, so it'd be awesome if someone could lend a suggestion or two on what I'm doing wrong.

Use Backgrid with Meteor

1 Answers1