setting fuelux datagrid source from backbone collection

Question

I am trying to set the fuelux datagrid source from my backbone collection. The examples source is here on https://github.com/ExactTarget/fuelux/tree/master/sample .

I tired like

(function (root, factory) {
 if (typeof define === 'function' && define.amd) {
 define(factory);
 } else {
    root.sampleData = factory();
   }
}(this, function () {
return { 
          "geonames": new mycollection ///this will retrurn new collection array as in     example
   };
}));

And my backbone render consist following code to instatate data source

   var dataSource = new StaticDataSource({
            columns: [
                {
                    property: 'username',
                    label: 'Name',
                    sortable: true
                },
                {
                    property: 'username',
                    label: 'Country',
                    sortable: true
                },
            data: this.collection,
            delay: 250
        });
        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

I get error StaticDataSource is not defined.

Can anyone explain me this? Or i will be greatful if you can help with me any reference to tutorail that explains well how to set datssource data from backbone collection? fuelux dosent have well documentation in my view.

Answer 1

The sample datasource at https://github.com/ExactTarget/fuelux/blob/master/sample/datasource.js allows you to populate the datagrid with a simple JavaScript object, which you could get from a Backbone collection by calling .toJSON() on the collection. Then, instantiate the datasource as follows:

https://github.com/ExactTarget/fuelux/blob/master/index.html#L112-L138

(replace the columns with what's needed for your own grid, and replace data: sampleData.geonames with data: yourCollection.toJSON())

You should then be able to instantiate the datagrid as follows:

https://github.com/ExactTarget/fuelux/blob/master/index.html#L144-L147

NOTE: this takes a one-time snapshot of your data and provides it to the datagrid. If you want your datagrid to support live queries against your Backbone collection it would just be a matter of providing a datasource that makes those queries against your collection. The datasource pattern allows end developers to connect a datagrid to any kind of data provider. Here is another example that uses the Flickr API: http://dailyjs.com/2012/10/29/fuel-ux/

I don't know of any existing datasource examples specifically for Backbone but if someone doesn't beat me to it I may create one - I really like Backbone also.