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 t

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.