3

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

我无法使用这个和谷歌搜索将数据加载到 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
    };
});
4

2 回答 2

1

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

  • jquery 不需要在 shim 配置中，因为它是 AMD 兼容的。
  • underscore 不依赖于 jquery。
  • 您应该exports在 shims 上声明一个配置，如文档中所述。

我显然可能在这里遗漏了一些东西，但我看不出你如何在没有某种错误的情况下完成这一切。

您可能通过在路径配置中声明它大写来摆脱 Backbone。我对 requirejs 的了解不足以确定这一点，但我认为这并不能保证 Backbone 在需要时总是被加载。

Fuelux 也可能存在 shim 错误配置。

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

于 2013-07-06T23:12:43.193 回答
1

您绝对可以使用 RequireJS 加载 Fuel UX。我有几个建议：

  1. 确保您的 libs/fuelux 目录包含来自 Fuel UX 存储库的 dist 文件夹的全部内容。示例文件：https ://github.com/ExactTarget/fuelux/tree/2.3.0/dist
  2. 将路径条目更改为fuelux: 'libs/fuelux',
  3. 从 shim 配置中删除fuelux- 因为库的模块是 AMD，所以不需要。
  4. 在 app.js 中将您的依赖项从更改fuelux为fuelux/all

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

于 2013-07-07T20:17:36.690 回答