淘汰赛:数据映射不适用于过滤器功能 [英] Knockout: Mapping of data not working with filter function

问题描述

基本上，我对淘汰赛很陌生.我一直在尝试无数的例子，现在我疯了.我在做什么并不困难.但是，它仍然不起作用.

Basically I'm very new to Knockout. I have been trying tons and tons of examples and I'm going insane now. What I'm doing is not difficult. But, it still doesn't work.

我试图获取数据，将其映射到一个对象(?)，然后使用一些可观察对象进行不同的过滤.无需再将这些数据写回服务器，仅用于消费.

I'm trying to take in data, map it to an object (?), then using some observables to do different filtering. This data will never need to be written back to the server, it is for consumption only.

我破碎的示例: 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);​

感谢所有的帮助.

如果有帮助(又名我的代码将永远无法工作)，则我对该代码的未来更新将是:

If it helps (aka my code will never work) my future updates to this code will be:

• 按类别过滤(我想我可以在另一个示例中进行此操作，但每个专家都不能使用类别数组)
• 按姓氏的首字母过滤
• 所有3种过滤类型必须在同一页面上

推荐答案

有关当前小提琴的特定问题:

For the specific problems with your current fiddle:

• 您在else语句结尾的filteredItems中缺少大括号
• 您不能在null或undefined上调用toLowerCase().我将其更改为将filter初始化为空字符串.
• 比较可能也应该将fullName转换为小写.

• 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.

此处更新了示例: http://jsfiddle.net/rniemeyer/qTb5Q/4/

这篇关于淘汰赛:数据映射不适用于过滤器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！