1

基本上我对淘汰赛很陌生。我一直在尝试大量的例子，现在我要疯了。我正在做的事情并不难。但是，它仍然不起作用。

我正在尝试接收数据，将其映射到一个对象（？），然后使用一些可观察对象进行不同的过滤。这些数据永远不需要写回服务器，它只是为了消费。

我的坏例子：http: //jsfiddle.net/boyus/qTb5Q/3/

function Item(id, firstName, lastName, expertise, img, tag) {
    this.id = ko.observable(id);
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.expertise = ko.observable(expertise);
    this.img = ko.observable(img);
    this.tag = ko.observable(tag);
    this.fullName = ko.dependentObservable(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
    this.expertPath = ko.dependentObservable(function() {
        return "http://www.example.com/user/" + this.id();
    }, this);
    this.imgPath = ko.dependentObservable(function() {
        return "http://img835.imageshack.us/img835/5116/" + this.img();
    }, this);
}

var viewModel = {
    items: ko.observableArray([]),
    filter: ko.observable()
};

//ko.utils.arrayFilter - filter the items using the filter text
viewModel.filteredItems = ko.dependentObservable(function() {
    var filter = this.filter().toLowerCase();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return (item.fullName().indexOf(filter) > -1);
        });

    }, viewModel);


var JSONdataFromServer = '[{"id":"1","firstName":"Bill","lastName":"Nye","expertise":"Science Guy", "img":"emptyprofile.png","tag":"environment"},{"id":"54","firstName":"John","lastName":"Dow","expertise":"Software Creation","img":"emptyprofile.png","tag":"software"},{"id": "544","firstName":"Pete","lastName":"Dragon","expertise":"Magic (and Sparkles)","img":"emptyprofile.png","tag": "environment"}]';

var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

//do some basic mapping (without mapping plugin)
var mappedData = ko.utils.arrayMap(dataFromServer, function(item) {
    return new Item(item.id, item.firstName, item.lastName, item.expertise, item.img, item.tag);
});


viewModel.items(mappedData);

ko.applyBindings(viewModel);​

感谢您提前提供的所有帮助。

如果它有帮助（也就是我的代码将永远无法工作）我未来对此代码的更新将是：

  • 按类别过滤（我想我在另一个例子中有这个工作，但不是每个专家的类别数组）
  • 按姓氏的第一个字母过滤
  • 所有 3 种过滤类型必须在同一页面上
4

1 回答 1

1

For the specific problems with your current fiddle:

  • you were missing a brace in the filteredItems at the end of the else statement
  • you can't call toLowerCase() on null or undefined. I changed it to initialize filter as an empty string.
  • the comparison probably should convert fullName to lower case as well.

Updated sample here: http://jsfiddle.net/rniemeyer/qTb5Q/4/

于 2012-11-15T01:11:53.073 回答