javascript - Backgrid 过滤器在 Backbone 应用程序中不起作用

Question

我仍在尝试将过滤功能实现到 Backbone 络应用程序中，但仍然有错误。查看

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;
});

没有过滤器的表工作正常，但现在出现错误:未捕获类型错误:无法读取未定义的属性“扩展” 我不知道我做错了什么。感谢您的帮助。

Answer 1

Backgrid.js 中似乎存在一些依赖性问题

您需要定义 backgrid，以便 require 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() {