2

我有一个Customer这样的模型（简化）：

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

Blocked有 3 个可能的值：0、1、2。0 表示正常，1 表示客户被警告，2 表示客户被阻止。

然后我有一个像这样的淘汰视图模型：

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 });
});

这提供了一个简单的搜索 api，用于搜索我的客户存储库。我有一个名为的属性excludeClosedAccs，默认情况下我已将其设置为 true，我想在我的视图中排除任何Blocked等于 2 的帐户。这是我视图上的一个复选框，当未选中时，会将它们包含在我的结果中. 这是我的观点：

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

是否可以在我的阵列上应用过滤器self.customers来做我想做的事情，还是我必须提出单独的请求，一个排除被阻止的帐户，一个包括它们？

4

1 回答 1

2

您想在视图模型中使用计算方法，如果 excludeClosedAccs 为 false，则返回完整集，或者根据您建议的标准过滤数组，如下所示：

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 });
});
于 2012-07-26T20:32:50.857 回答