KnockOutJS Array Filter Defaults

Question

I am fairly new to KnockOutJs. My goal is to create a list of products, that can be filtered by brand, and certain features.

The problem is, there are no items being displayed by default. The items display fine after a filter is applied.

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

Code:

    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

I forked your 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);

It's simply an issue in your ko.computed logic where you aren't returning anything on the first run through of the computed! I added an else block that shows what's going on.

Cheers and good luck with knockout!