Фильтр Backgrid не работает в базовом приложении

Question

Я все еще пытаюсь реализовать функцию фильтра в базовом веб-приложении, но у меня все еще есть ошибка. Просмотр

маршрутизатор

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 я не знаю, что я делаю неправильно. Спасибо за любую помощь.

Answer 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() {