Fuelx数据网格，需要js

有没有一种方法可以将Fuelux Datagrid与requirejs和backbonej一起使用？

我无法使用这个将数据加载到Datagrid上，通过谷歌搜索，听起来你不能将requirejs与Datagrid一起使用，但我想检查是否有任何方法可以解决这个问题。

任何建议或例子都将是伟大的

下面是我的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();
});

下面是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
    };
});