有没有办法将Fuelux Datagrid与requirejs和backbonejs一起使用？
我无法使用这个和Googling将数据加载到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
};
});
答案 0 :(得分：1)
从未尝试使用Fuelux Datagrid，但你的垫片配置看起来不太合适。
exports配置，如docs中所述。我显然可能在这里遗漏了一些东西，但我看不出你怎么能在没有某种错误的情况下完成所有这些。
通过在路径配置中声明它大写，你可能正在逃避Backbone。我不太了解requirejs以确定这一点，但我认为这不能保证Backbone在需要时总是被加载。
可能还有对于Fuelux的垫片配置错误。
编辑：还有一个建议是在app.js中的initialize函数之前插入调试器语句或断点，看看是否定义了传递给模块函数的所有参数，以及它们是否是你期望的那些参数。
答案 1 :(得分：1)
您绝对可以使用RequireJS加载Fuel UX。我有一些建议：
fuelux: 'libs/fuelux', fuelux - 因为库的模块是AMD，所以不需要。fuelux更改为fuelux/all 这应该让Fuel UX正确加载。除此之外，如果您仍然遇到将数据导入数据网格的问题，我建议在调用回调之前在数据源的数据函数中设置断点，以验证它发送到数据网格的内容。