Fuelux datagrid and require js

Question

Is there a way to use Fuelux Datagrid with requirejs and backbonejs?

I cannot get to load the data onto the Datagrid using this and by Googling, it sounds like you cannot use requirejs with Datagrid but I wanted to check if there are any ways around this.

Any suggestions or examples would be great

Below is my main.js

require.config({
  paths: {
    jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min',
    underscore: 'libs/underscore/underscore.min',
    Backbone: 'libs/backbone/backbone.min',
    // fuelux: 'http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min',
    fuelux: 'libs/fuelux/datagrid',
    selectjs: 'libs/fuelux/select',
    utiljs: 'libs/fuelux/util',
    bootstrap: '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min',
    qunit: '//cdnjs.cloudflare.com/ajax/libs/qunit/1.11.0/qunit.min',
    bootstrapDatepicker: 'bootstrap-datepicker',
    backboneValidation: '//cdnjs.cloudflare.com/ajax/libs/backbone.validation/0.7.1/backbone-validation-min',
    datasource: 'libs/fuelux/datasource/datasource',
    sampleData: 'libs/fuelux/datasource/data'
  },
  shim: {
    'jquery': {
      deps: [],
      exports: '$'
    },
    'underscore': {
      deps: ['jquery']
    },
    'backbone': {
      deps: ['jquery']
    },
    'fuelux': {
      deps: ['jquery']
    },
    'bootstrap': {
      deps: ['jquery']
    },
    'qunit': {
      deps: ['jquery']
    },
    'bootstrapDatepicker': {
      deps: ['jquery']
    },
    'backboneValidation': {
      deps: ['jquery']
    },
    'selectjs': {
      deps: ['utiljs']
    },
    'utiljs': {
      deps: ['fuelux']
    }
  }

});

require([
  // Load our app module and pass it to our definition function
  'app',

], function(App){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});

Below is app.js

define([
    'jquery',
    'underscore',
    'Backbone',
    'fuelux',
    'sampleData',
    'datasource',
    'bootstrap',
    'qunit',
    'bootstrapDatepicker',
], function($, _, Backbone, fuelux, sampleData, datasource, Bootstrap, Qunit, datepicker){

    var initialize = function(){

        var ReportModel = Backbone.Model.extend({
            urlRoot: '/report',
            initialize: function(){
                console.log(datasource);
            },
            defaults: function(){
                var dataSources = new datasource({
                    columns: [
                        {
                          property: 'name',
                          label: 'Name',
                          sortable: true
                        },
                        {
                          property: 'countrycode',
                          label: 'Country',
                          sortable: true
                        },
                        {
                          property: 'population',
                          label: 'Population',
                          sortable: true
                        },
                        {
                          property: 'fcodeName',
                          label: 'Type',
                          sortable: true
                        }
                      ],
                    data: [
                        {name:'<a href="#">foo</a>', countrycode:'United States', population:423459000, fcodeName:'23434123' },
                        {name:'boo', countrycode:'Canada', population:123459000, fcodeName:'552432123' },
                        {name:'bar', countrycode:'United Kingdom', population:523459000, fcodeName:'54544123' },
                        {name:'doo', countrycode:'France', population:323459050, fcodeName:'9848823123' },
                        {name:'too', countrycode:'Scotland', population:42344300, fcodeName:'23434123' },
                        {name:'woo', countrycode:'Ireland', population:12345903, fcodeName:'52432123' },
                        {name:'mar', countrycode:'Austria', population:32342910, fcodeName:'4544123' },
                        {name:'soo', countrycode:'Spain', population:23459900, fcodeName:'9848823123' },
                        {name:"Dhaka",countrycode:"BD",population:10356500, fcodeName:'1848823123'},
                        {name:"Jakarta",countrycode:"BD",population:10356500, fcodeName:'1848823123'},
                        {name:"Seoul",countrycode:"ID",population:8540121, fcodeName:'4448828694'},
                        {name:"Hong Kong",countrycode:"HK",population:18540121, fcodeName:'349903004'}
                      ],
                    delay: 300
                });

                return dataSources;
            }
            /*defaults: function(){
                var fromDate = new Date();
                fromDate.setDate(fromDate.getDate() - 7);
                return {
                    fromDate: fromDate,
                    toDate: new Date(),
                    JobCategory: null,
                    limit: 100
                }
            }*/
        });

        var ReportCollection = Backbone.Collection.extend({
            url: '/report',
            model: ReportModel
        });

        var ReportData = new ReportModel();


        var ReportRouter = Backbone.Router.extend({
            initialize: function(){
                Backbone.history.start();
            },

            routes: {
                '' : 'main'
            },

            'main': function(){

                // console.log(datepicker);
                $ = jQuery;
                $('#fromDate').datepicker().on('changeDate', function(e){
                    $('#toDate').datepicker('setStartDate', new Date(e.date.valueOf()));
                });
                $('#toDate').datepicker().on('changeDate', function(e){
                    $('#fromDate').datepicker('setEndDate', new Date(e.date.valueOf()));
                });
                sidebarwidth = $(".sidebar-width").css('width');
                bodypaddingtop = $(".navbar-fixed-top").css('height');
                sidebarheight = $("body").css('height');
                $('.sidebar-nav-fixed').css('width', sidebarwidth);
                $('.sidebar-nav-fixed').css('height', sidebarheight);
                $('body').css('paddingTop', bodypaddingtop)
                contentmargin = parseInt(sidebarwidth)
                $('.span-fixed-sidebar').css('marginLeft', contentmargin);
                $('.span-fixed-sidebar').css('paddingLeft', 60);
            }
        });

        Collection = new ReportCollection(ReportData);

        var ReportView = Backbone.View.extend({
            el: $('#container'),
            initialize: function(){
                Collection.fetch();
                _.bindAll(this, 'render', 'submit_form');
                this.render();
            },
            events: {
                "click #submit": "submit_form"
            },
            render: function(){

                // var compiledTemplate = _.template( projectListTemplate, data );
                // console.log(this);
                // this.$el.append('<div>- tet</div>');
                // this.$el.append( compiledTemplate );

                // console.log(ReportData.toJSON());

                $('#DataGrid').datagrid({
                    dataSource: ReportData.toJSON(),
                    stretchHeight: true
                });

                return this;
            },
            submit_form: function(){
                // this.$el.append('<div>tet</div>');
                // return false;
                var Data = new ReportData({
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val(),
                    JobCategory: $('#job_category').val(),
                    limit: $('#limit').val()
                });
                data = Collection.fetch();
                console.log(data);
            }
        });

        var ReportView = new ReportView;

        ReportRouter = new ReportRouter();

        ReportRouter.on('router:main', function(){
            console.log('router test');
            ReportView.render();
        });
    };

    return {
        initialize: initialize
    };
});

Answer 1

You can absolutely load Fuel UX with RequireJS. I have a few suggestions:

1. Ensure your libs/fuelux directory contains the entire contents of the dist folder from the Fuel UX repo. Example files: https://github.com/ExactTarget/fuelux/tree/2.3.0/dist
2. Change your path entry to fuelux: 'libs/fuelux',
3. Remove fuelux from the shim config - since the library's modules are AMD this isn't needed.
4. In app.js change your dependency from fuelux to fuelux/all

This should get Fuel UX to load properly. Beyond that, if you are still having issues getting data into your datagrid I'd recommend setting a breakpoint inside your datasource's data function just before it calls the callback, to verify what it's sending to the datagrid.

Answer 2

Never tried Fuelux Datagrid, but your shim configuration does not look quite right.

• jquery does not need to be in the shim config, because it is AMD compliant.
• underscore does not have a dependency on jquery.
• you should be declaring an exports config on your shims, as explained in the docs.

I obviously might be missing something here, but I can not see how you can get through all this without an error of some sort.

Possibly you are getting away with Backbone by declaring it capitalized in your paths config. I do not know enough of requirejs to be sure about this, but I think this would not guarantee Backbone being always loaded when needed.

Possibly there is a shim misconfiguration for Fuelux too.

Edit: one more suggestion is to insert a debugger statement or a breakpoint just before your initialize function in app.js and see if all the arguments passed to your module function are defined and if they are what you would expect them to be.