我仍然尝试将过滤功能实现到主干web-app中，但我仍然有错误。 查看
define([
'underscore',
'backbone',
'collections/tables/TablesCollection',
'text!templates/tables/tablesTemplate.html',
'lunr',
'backgrid',
'backbone.paginator',
'backgrid-paginator',
'backgrid-filter',
], function(_, Backbone, TablesCollection, tablesTemplate, lunr, backgrid){
var TablesView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var tables = JSON.parse(localStorage.getItem('tables'));
var tablesCollection = new TablesCollection(tables);
this.el.innerHTML = _.template( tablesTemplate,{data : tablesCollection.toJSON()});
var columns = [{
name: "id",
label: "ID",
editable: false,
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "title",
label: "Name",
cell: "string"
}, {
name: "seats",
label: "Seats",
cell: "string"
}, {
name: "location",
label: "Location",
cell: "string"
}, {
name: "date",
label: "Active",
cell: "activ",
editable: false,
},{
name: "dummy",
label: "Delete",
cell: "dele",
editable: false,
}];
var pageableGrid = new Backgrid.Grid({
columns: columns,
collection: tablesCollection
});
var $example2 = $("#example-2-result");
$example2.append(pageableGrid.render().el)
var paginator = new Backgrid.Extension.Paginator({
collection: tablesCollection
});
$("#example-2-pagi").append(paginator.render().el);
var clientSideFilter = new Backgrid.Extension.ClientSideFilter({
collection: clientTerritories,
placeholder: "Search in the browser",
fields: ['name'],
wait: 150
});
// $("#client-side-filter-example-result").prepend(clientSideFilter.render().el);
},
});
return TablesView;
});
路由器
define([
'underscore',
'backbone',
'models/table/TableModel',
'collections/tables/TablesCollection',
'views/tables/TablesView',
'lunr',
'backgrid',
'backbone.paginator',
'backgrid-paginator',
'backgrid-filter',
], function(_, Backbone, TableModel, TablesCollection, TablesView) {
if(localStorage.getItem('tables') == null){
var tables = [
{title: "Table 1", seats: "3", location: "venku", active:true, cls: "1cls"},
{title: "Table 2", seats: "3", location: "venku", active:true, cls: "2cls"},
{title: "Table 3", seats: "3", location: "venku", active:true, cls: "3cls"},
{title: "Table 4", seats: "3", location: "venku", active:true, cls: "4cls"},
{title: "Table 5", seats: "3", location: "venku", active:true, cls: "1cls"},
{title: "Table 6", seats: "3", location: "venku", active:true, cls: "2cls"},
{title: "Table 7", seats: "3", location: "venku", active:true, cls: "3cls"},
{title: "Table 8", seats: "3", location: "venku", active:true, cls: "4cls"},
{title: "Table 9", seats: "3", location: "venku", active:true, cls: "1cls"},
{title: "Table 10", seats: "3", location: "venku", active:false, cls: "2cls"},
{title: "Table 11", seats: "3", location: "venku", active:false, cls: "3cls"},
{title: "Table 12", seats: "3", location: "venku", active:false, cls: "4cls"},
];
localStorage.setItem('tables',JSON.stringify(tables));
}
var AppRouter = Backbone.Router.extend({
routes: {
'':'tables',
'tables':'tables',
}
});
var initialize = function(){
window.app_router = new AppRouter;
app_router.on('route:tables', function(table) {
var tablesView = new TablesView({model:{table:table}});
tablesView.render();
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
集合
define([
'underscore',
'backbone',
'models/table/TableModel',
'lunr',
'backgrid',
'backbone.paginator',
'backgrid-paginator',
'backgrid-filter',
], function(_, Backbone, TableModel){
var TablesCollection = Backbone.PageableCollection.extend({
model: TableModel,
//url: "",
state: {
pageSize: 5
},
mode: "client", // page entirely on the client side
});
return TablesCollection;
});
没有过滤器的表格工作正常，但现在我有错误：Uncaught TypeError: Cannot read property 'Extension' of undefined我不知道自己做错了什么。谢谢你的帮助。
答案 0 :(得分：1)
Backgrid.js中似乎存在一些依赖性问题
您需要定义backgrid，因此需要JS可以整理您的依赖项。
define(["jquery", "underscore", "backbone", "backgrid"], factory);
请参阅下面的完整差异。
diff --git a/index.html b/index.html
index 9215493..8946227 100755
--- a/index.html
+++ b/index.html
@@ -22,4 +22,4 @@
</div>
</content>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/libs/backgrid-filter.js b/js/libs/backgrid-filter.js
index 59e3012..c4d94af 100644
--- a/js/libs/backgrid-filter.js
+++ b/js/libs/backgrid-filter.js
@@ -509,4 +509,4 @@
});
-}));
\ No newline at end of file
+}));
diff --git a/js/libs/backgrid-paginator.js b/js/libs/backgrid-paginator.js
index 9a032e5..e7da301 100755
--- a/js/libs/backgrid-paginator.js
+++ b/js/libs/backgrid-paginator.js
@@ -8,7 +8,13 @@
(function (root, factory) {
// CommonJS
- if (typeof exports == "object") {
+
+ if (typeof define === 'function' && define.amd) {
+
+ // AMD. Register as an anonymous module.
+ define(["underscore", "backbone", "backgrid"], factory);
+ } else if (typeof exports == "object") {
+
module.exports = factory(require("underscore"),
require("backbone"),
require("backgrid"),
diff --git a/js/libs/backgrid.js b/js/libs/backgrid.js
index a3c7367..e493e84 100755
--- a/js/libs/backgrid.js
+++ b/js/libs/backgrid.js
@@ -9,7 +9,13 @@
(function (factory) {
require("backbone"),
require("backgrid"),
diff --git a/js/libs/backgrid.js b/js/libs/backgrid.js
index a3c7367..e493e84 100755
--- a/js/libs/backgrid.js
+++ b/js/libs/backgrid.js
@@ -9,7 +9,13 @@
(function (factory) {
// CommonJS
- if (typeof exports == "object") {
+
+ if (typeof define === 'function' && define.amd) {
+
+ // AMD. Register as an anonymous module.
+ define(["jquery", "underscore", "backbone", "backgrid"], factory);
+ }
+ else if (typeof exports == "object") {
module.exports = factory(module.exports,
require("underscore"),
require("backbone"));
@@ -20,6 +26,7 @@
"use strict";
+
/*
backgrid
http://github.com/wyuenho/backgrid
@@ -2982,4 +2989,4 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
});
return Backgrid;
-}));
\ No newline at end of file
+}));
diff --git a/js/views/tables/TablesView.js b/js/views/tables/TablesView.js
index aca89af..ea14749 100755
--- a/js/views/tables/TablesView.js
+++ b/js/views/tables/TablesView.js
@@ -8,7 +8,7 @@ define([
'backbone.paginator',
'backgrid-paginator',
'backgrid-filter',
-], function(_, Backbone, TablesCollection, tablesTemplate, lunr, backgrid){
+], function(_, Backbone, TablesCollection, tablesTemplate, lunr, Backgrid){
var TablesView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {