2

私はそのCustomerようなモデルを持っています（簡略化）：

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

Blocked0、1、2の3つの可能な値があります。0は大丈夫、1は顧客に警告、2は顧客がブロックされていることを意味します。

次に、次のようなノックアウトviewModelがあります。

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が提供されます。デフォルトでtrueに設定したというプロパティがあり、ビュー内で2に等しいexcludeClosedAccsアカウントを除外したいと考えています。これはビューのチェックボックスであり、チェックを外すと結果に含まれます。 Blocked。これが私の見解です：

<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 に答える