javascript - Fuelux datagrid on Backbone js NAN error with no data -
i'm using backbone, require, fuelux, bootstrap single page web app , i'm trying fuel ux datagrid work , can see correct object sets returned fine data not inserted table nan under page count other fields in table empty.
the thing being returned correctly number of objects returned. how can possible?
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: '/careersandjobs/cnj_report', initialize: function(){ // console.log('test'); }/*, defaults: function(){ return { fromdate: new date(), todate: '', limit: 10 } }*/ }); var reportcollection = backbone.collection.extend({ url: '/careersandjobs/cnj_report', model: reportmodel }); var reportdata = new reportmodel(sampledata.geonames); var reportrouter = backbone.router.extend({ initialize: function(){ backbone.history.start(); }, routes: { '' : 'main' }, 'main': function(){ // console.log('main test'); $ = 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(){ // initializing datagrid var datasources = new datasource({ columns: [ { property: 'toponymname', label: 'name', sortable: true }, { property: 'countrycode', label: 'country', sortable: true }, { property: 'population', label: 'population', sortable: true }, { property: 'fcodename', label: 'type', sortable: true } ], data: reportdata.tojson(), delay: 250 }); console.log(reportdata.tojson()); $('#datagrid').datagrid({ datasource: datasources, stretchheight: true }); return this; }, submit_form: function(){ 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 }; });
Comments
Post a Comment