CODEWITHSUNDEEP
knockout.js
CallumVass
CallumVass

Reputation: 11458

Apply filter to returned results

I have a Customer model like so (simplified):

public int CustomerAcc { get; set; }
public string Name { get; set; }
public int Blocked { get; set; }

Blocked has 3 possible values: 0, 1, 2. 0 means okay, 1 means customer is warned, 2 means customer is blocked.

I then have a knockout viewModel like so:

function SearchCustomerViewModel() {
    var self = this;
    self.custTerm = ko.observable('');
    self.customers = ko.observableArray([]);
    self.excludeClosedAccs = ko.observable(true);

    self.search = function () {
        $.ajax({
            url: "/api/SearchCustomers",
            data: { id: self.custTerm },
            type: "GET",
            success: function (data) {
                self.customers(data);
            }
        });
    }
}

$(document).ready(function () {
    var viewModel = new SearchCustomerViewModel();
    ko.applyBindings(viewModel);
    $("#btnSearch").click({ handler: viewModel.search });
});

This provides a simple search api which searches my customer repository. I have a property called excludeClosedAccs which I have set as true by default, which I would like to exclude any accounts in my view which have a Blocked equal to 2. This is a checkbox on my view, which when unticked, will include them in my results. Here is my View:

<div id="body">
    <h1>Customer Search</h1>

    <div>
        Search:<input type="text" data-bind="value: custTerm" />

        <input type="button" id='btnSearch' title="Search" value="Search" />
    </div>

    <div data-bind="visible: customers().length > 0">
        <span data-bind="text: customers().length"></span>
        customers found.
        <label>Exclude Closed Accounts: <input data-bind="checked: excludeClosedAccs" type="checkbox"/></label>
    </div>

    <div id="results-container" data-bind="template: { name: 'customer-results', foreach: customers }"></div>

</div>

<script type="text/html" id="customer-results">
    <div>
        <h6 data-bind="text: CustomerAcc"></h6>
        <p>Company Name: <span data-bind="text: Name"></span></p>
        <!-- ko if: Blocked > 0 -->
        <p>Blocked: <span data-bind="text: Blocked"></span></p>
        <!-- /ko -->
    </div>
</script>

Is it possible to apply a filter on my self.customers array to do what I wish or do I have to make a seperate request, one to exclude blocked accounts and one which includes them?

Upvotes: 2

Views: 1290

Answers (1)

mjbates7
mjbates7

Reputation: 674

You want to use a computed method in your view model that returns either the full set if excludeClosedAccs is false or filter the array based on criteria you suggested like so:

function SearchCustomerViewModel() {

    // properties
    var self = this;
    self.custTerm = ko.observable('');
    self.customers = ko.observableArray([]);
    self.excludeClosedAccs = ko.observable(true);
    self.customersToShow = ko.computed(function () {
        if (!self.excludeClosedAccs()) {
            return self.customers();
        }
        return ko.utils.arrayFilter(self.customers(), function (customer) {
            return customer.Blocked == 0 || customer.Blocked == 1;
        });
    });

    // methods
    self.search = function () {
        $.ajax({
            url: "/api/SearchCustomers",
            data: { id: self.custTerm },
            type: "GET",
            success: function (data) {
                self.customers(data);
            }
        });
    }
}

$(document).ready(function () {
    var viewModel = new SearchCustomerViewModel();
    ko.applyBindings(viewModel);
    $("#btnSearch").click({ handler: viewModel.search });
});

Upvotes: 2

Related Questions