Question

I have a method on my viewModel like so:

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

What I’d like to do is show an element if the method has been called using the knockout visible property. Is that possible?

I’ve attached that method to a button like so:

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

I tried this but it didnt work:

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

Answer 1

Add an observable boolean, and use that to indicate whether or not the method has been called:

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

And then:

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