Question

我是KnockOutJs的新手。我的目标是创建一个产品列表，可以按品牌和某些功能进行过滤。

问题是，默认情况下没有项目显示。应用过滤器后，项目显示正常。

JSFiddle：http://jsfiddle.net/3rcxvxzu/20/

代码：

    function Item(_phoneID, phoneManuf, phoneModel, phoneAlias) {
    this._phoneID = ko.observable(_phoneID);
    this.phoneManuf = ko.observable(phoneManuf);
    this.phoneModel = ko.observable(phoneModel);
    this.phoneAlias = ko.observable(phoneAlias);
    this.displayName = ko.computed(function () {
        return this.phoneManuf() + " " + this.phoneModel();
    }, this);

}

var viewModel = {
    items: ko.observableArray([]),
    selectedfilter: ko.observable(""),
    selectedBrand: ko.observable(""),
    selectedIndex: ko.observable(""),
    pageSize: ko.observable(3),
    pageIndex: ko.observable(0)

};

viewModel.filteredItems = ko.computed(function () {
    var filter = this.selectedfilter().toLowerCase();
    if (filter) {
        this.selectedIndex("");
        this.selectedBrand("");
        return ko.utils.arrayFilter(this.items(), function (item) {
        return item;
        });
    } else {
        var b = this.selectedBrand().toLowerCase();
        if (b) {
            if (!b || b == "all") {
                return this.items();
            }
            return ko.utils.arrayFilter(this.items(), function (item) {
                return item.phoneManuf().toLowerCase() == b;
            });
        }
    }

}, viewModel);

viewModel.optionSelector = function (selector, data) {
    //option = selector;

    switch (selector) {
        case "brand":
            this.selectedfilter("");
            this.selectedIndex("");
            this.selectedBrand(data);
            break;
        case "index":
            this.selectedfilter("");
            this.selectedBrand("");
            this.selectedIndex(data);
            break;
        default:
            this.selectedfilter("");
            this.selectedIndex("");
            this.selectedBrand("all");
            break;
    }
};


var JSONdataFromServer = '[{"_phoneId":"54a6d97a1fe9a5642f7a6cc9","phoneManuf":"Apple","phoneModel":"x200","phoneAlias":"BuggyMorph"},{"_phoneId":"54a6d97a78350b0e7364f6ab","phoneManuf":"Samsung","phoneModel":"x200","phoneAlias":"BuggyMorph"},{"_phoneId":"54a6d97a846c10d079721565","phoneManuf":"LG","phoneModel":"XT2042","phoneAlias":"BeastlyPhone"},{"_phoneId":"54a6d97adaead0ff327b8029","phoneManuf":"Samsung","phoneModel":"M592","phoneAlias":"BeastlyPhone"},{"_phoneId":"54a6d97a6267976c7396f0bc","phoneManuf":"Motorola","phoneModel":"XT2042","phoneAlias":"BeastlyPhone"}]';

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._phoneID, item.phoneManuf, item.phoneModel, item.phoneAlias);
});


viewModel.items(mappedData);

Answer 1

我分叉你的jsfiddle：http://jsfiddle.net/5pag6aq3/

viewModel.filteredItems = ko.computed(function () {
var filter = this.selectedfilter().toLowerCase();
console.log(filter);
if (filter) {
    this.selectedIndex("");
    this.selectedBrand("");
    return ko.utils.arrayFilter(this.items(), function (item) {
    return item;
    });
} else {
    var b = this.selectedBrand().toLowerCase();
    console.log(b);
    if (b) {
        if (!b || b == "all") {
            return this.items();
        }
        return ko.utils.arrayFilter(this.items(), function (item) {
            return item.phoneManuf().toLowerCase() == b;
        });
    }
    else {
         console.log("uh oh im here now!!");   
    }
}

}, viewModel);

这只是你的ko.computed逻辑中的一个问题，你在计算机的第一次运行中没有返回任何东西！我添加了一个else块来显示正在进行的操作。

欢呼和淘汰赛的好运！

KnockOutJS阵列过滤器默认值

1 个答案: