Backbone.js过滤集合中的任何值

时间:2012-12-05 15:49:23

标签: javascript backbone.js

我有一个搜索/过滤字段,我希望能够过滤集合的任何值。我的数据如下:

 exports.administrators = [
{
  id: 1,
  firstName: "User1",
  lastName: "Tester",
  phone: "781-000-0000",
  email: "user1.tester@email.com",
  privileges: "view-only"
}, {
  id: 2,
  firstName: "Mickey",
  lastName: "Mouse",
  phone: "781-123-4567",
  email: "mickey.mouse@disney.com",
  privileges: "all"
}, {
  id: 3,
  firstName: "Snow",
  lastName: "White",
  phone: "781-890-1234",
  email: "snow.white@disney.com",
  privileges: "all"
}, {
  id: 4,
  firstName: "Anakin",
  lastName: "Skywalker",
  phone: "888-874-9084",
  email: "anakin.skywalker@deathstar.com",
  privileges: "view-only"
}, {
  id: 5,
  firstName: "Obi-one",
  lastName: "Kenobi",
  phone: "908-765-5432",
  email: "obi.kenobi@jedi.com",
  privileges: "all"
}, {
  id: 6,
  firstName: "Master",
  lastName: "Yoda",
  phone: "876-654-2134",
  email: "yoda@jedi.com",
  privileges: "view-only"
}, {
  id: 7,
  firstName: "Han",
  lastName: "Solo",
  phone: "781-456-3209",
  email: "han.solo@gmail.com",
  privileges: "all"
}, {
  id: 8,
  firstName: "Neo",
  lastName: "TheOne",
  phone: "781-000-0000",
  email: "neo@matrix.com",
  privileges: "all"
}];

View将根据keyup事件触发事件:

AdministratorView.prototype.events = {
  'click .sub-content th.sort, .sub-content th.sort-up, .sub-content th.sort-down': 'sortTable',
  'click .light-btn': 'showAdd',
  'keyup #filter-find': 'filterAdministrators'
};

我还抽象了我想要执行过滤的功能:

  App.Utils.filterCollection = function(collection, filterValue) {
if (filterValue !== "") {
  return _.filter(collection.models, function(data) {
    var values;
    values = _.values(data.attributes);
    _.each(values, function(value) {
      if (!isNaN(value)) {
        value = value.toString();
      }
      return value.indexOf(filterValue) > 0;
    });
  });
}

};

我遇到的问题是:

  1. filterCollection函数返回undefined
  2. 有更优雅的方式吗?
  3. 提前感谢所有帮助。

    干杯,

    Kianosh

    更新功能:

    我已经使用@dbaseman

    的一些输入更新了这个函数
      App.Utils.filterCollection = function(collection, filterValue) {
    var filteredCollection;
    if (filterValue === "") {
      [];
    }
    return filteredCollection = collection.filter(function(data) {
      return _.some(_.values(data.toJSON()), function(value) {
        value = !isNaN(value) ? value.toString() : value;
        return value.indexOf(filterValue) >= 0;
      });
    });
    

    };

    但是我仍然从函数中获取一个空(或未定义)值。我被踩了!!

    更新#2 找到了部分解决方案。这是jsFiddle - http://jsfiddle.net/kianoshp/YWSSp/。它正确过滤,但是当我清空过滤器字段时,我希望显示原始数据集。但是现在我得到一张空白的桌子。处理解决方案,但任何帮助/提示都会有所帮助。

    更新#3 最终解决方案在jsFiddle - > http://jsfiddle.net/kianoshp/YWSSp/77/感谢@dbaseman

2 个答案:

答案 0 :(得分:2)

除了微小的改进之外,我认为没有更优雅的方式:

  1. Backbone集合代理Underscore.JS方法,因此您可以使用collection.filter
  2. 也可以使用_.some检查是否有任何值匹配
  3. 就问题而言,据我所知,有两个问题:

    1. 你在Backbone模型上调用_.values(这是{Back}集合调用时filter返回的内容)。您必须使用model.toJSON()
    2. 在JSON表示上调用过滤器
    3. 您正在检查该值是否为数字,然后在该值上调用indexOf。我想你想检查它是否是字符串(`typeof value =='string')。
    4. 这是修改后的函数(Demo)。

      Backbone.Collection.prototype.filterValues = function(filterValue) {
          if (filterValue == "") return [];
          return this.filter(function(data) {
              return _.some(_.values(data.toJSON()), function(value) {
                 if (_.isNumber(value)) value = value.toString();
                 if (_.isString(value)) return value.indexOf(filterValue) != -1;
                 return false;
              });
          });
      }
      

答案 1 :(得分:2)

我已经接受了McGarnagle提供的答案并添加了一些改进。下面的代码允许您在具有包含对象的属性的模型内搜索。

Backbone.Collection.prototype.filterValues = function(filterValue) {
if (filterValue === ""){
    return this.models;
}

function collectionFilter(data) {
    if(data.toJSON){
        data = data.toJSON();
    }

    return _.some(_.values(data), function(value) {
        if(_.isObject(value)){
            return collectionFilter(value);
        }

        if (_.isNumber(value)){
            value = value.toString();
        }

        if (_.isString(value)){
            value = value.toLowerCase();

            return value.indexOf(filterValue) !== -1;
        }

        return false;
    });
}

return this.filter(collectionFilter);
};