1

コレクションの任意の値でフィルタリングできるようにしたい検索/フィルター フィールドがあります。私が持っているデータは次のとおりです。

 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"
}];

ビューは、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. これを行うよりエレガントな方法はありますか？

事前にご協力いただきありがとうございます。

乾杯、

キアノシュ

更新された機能:

@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 に感謝

4

2 に答える 2

2

マイナーな改善を除いて、これ以上エレガントな方法はないと思います。

  1. バックボーンコレクションはUnderscore.JSメソッドにプロキシするため、次を使用できますcollection.filter
  2. Youldは_.some、値が一致するかどうかを確認するためにも使用します

問題に関しては、私が知る限り2つあります。

  1. _.valuesバックボーンモデルを呼び出しています（filterバックボーンコレクションを呼び出すと、これが返されます）。を使用して、JSON表現でfilterを呼び出す必要がありますmodel.toJSON()。
  2. 値が数値であるかどうかを確認していますが、値を呼び出しindexOfています。文字列かどうかを確認するつもりだったと思います（ `typeof value =='string'）。

これが変更された関数です（デモ）。

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;
        });
    });
}
于 2012-12-05T16:35:37.783 に答える
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);
};
于 2014-03-25T09:23:33.113 に答える