Backbone.js過濾集合中的任何值

Question

我有一個搜索/過濾字段，我希望能夠過濾集合的任何值。我擁有的數據如下：

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. 是否有這樣做的更優雅的方式？

感謝您提前提供的所有幫助。

乾杯，

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

Answer 1

我已經採取了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); 
}; 

Answer 2

我不認爲有一個更優雅的方式，除了小的改進：

1. 骨幹集合代理Underscore.JS方法，所以你可以使用collection.filter
2. Yould也使用_.some來檢查是否有任何值匹配

至於問題，有兩個據我可以告訴：

1. 你是在骨幹模型調用_.values（這就是當上骨幹集合稱爲filter回報）。您必須使用model.toJSON()在JSON表示上調用過濾器。
2. 您正在檢查該值是否爲號碼，但對該值調用indexOf。我想你的意思是檢查它是否是字符串（'typeof value =='string'）。

這是修改的功能（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; 
     }); 
    }); 
}