Fuelux datagrid和需要js

Question

有没有办法将Fuelux Datagrid与requirejs和backbonejs一起使用？

我不能使用这个和谷歌将数据加载到Datagrid上，听起来你不能在Datagrid中使用requirejs，但我想检查一下有没有什么方法可以解决这个问题。

任何建议或例子都是很棒的

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

Answer 1

你完全可以用RequireJS加载Fuel UX。我有几个建议：

1. 确保libs/fuelux目录包含Fuel UX存储库中dist文件夹的全部内容。示例文件:从填充配置中https://github.com/ExactTarget/fuelux/tree/2.3.0/dist
2. Change到fuelux: 'libs/fuelux',
3. Remove fuelux的路径条目-由于库的模块是AMD，这是不必要的。在app.js中的
4. 将您的依赖项从fuelux更改为fuelux/all

这应该会让Fuel UX正确加载。除此之外，如果您在将数据放入datagrid时仍然有问题，我建议您在数据源的data函数调用回调之前在其中设置一个断点，以验证它发送到datagrid的内容。

Answer 2

从未尝试过Fuelux Datagrid，但您的填充程序配置看起来不太正确。

docs.中解释的那样，

• jquery不需要在填充配置中，因为它是AMD
• 不依赖于jquery。
• 您应该在填充程序上声明一个exports配置

显然，我可能在这里遗漏了一些东西，但我不明白您如何才能在不发生某种错误的情况下完成所有这些操作。

通过在路径配置中声明Backbone是大写的，你可能是在逃避Backbone。我不知道足够多的需求来确定这一点，但我认为这不能保证Backbone总是在需要的时候加载。

可能Fuelux也有一个填充错误的配置。

编辑:另一个建议是在app.js中的初始化函数之前插入调试器语句或断点，并查看传递给模块函数的所有参数是否都已定义，以及它们是否如您所期望的那样。