Question

所以我使用搜索框从表中搜索特定数据。但我遇到的问题是，当页面加载表是空的时，即使在特定的搜索框中没有输入值，并且应该显示所有数据，在表中加载数据的最佳方法是什么桌子。我正在从数组中搜索数据。

self.TransactionList = ko.observableArray(self.transactiondatas());
        self.Query = ko.observable("");
        self.Query.subscribe(function (value) {
        if (!(value && value.trim())) {
            self.TransactionList(self.transactiondatas());
            return;
        }
        var data = ko.utils.arrayFilter(self.transactiondatas(), function (item) {
        if (item.transaction_type.toLowerCase().indexOf(value.trim().toLowerCase()) > -1) {
                return true;
            }
        });
        self.TransactionList(data);
        });

        /* Function for intializing the TransactionViewModel view-model */
        self.InitializeTransactionViewModel = function () {           
            self.transactiondatas.removeAll();
           $.getJSON(BASEURL + 'index.php/account/TransactionData/' + auth , function (transactions) {
             $.each(transactions, function (index, transaction) {
                    self.transactiondatas.push( transaction);
                });
                // holds the total transactiondatas count
                self.TotalNumberOfTransactiondatas(self.transactiondatas().length);
                // initialize the Money Requests and Offers available table
                self.searchTransactiondatas();
           });  
       };
       self.InitializeTransactionViewModel();
      // this part above tries to push the data but the table does not populate because of the Query

这是html view

上的输入

<input  data-bind="value: Query, valueUpdate: 'keyup'"   type="search" class="form-control text-center"  placeholder="Search transaction type">

Answer 1

像这样组织你的viewmodel：

// data properties
self.transactiondatas = ko.observableArray();
self.query = ko.observable();

// computed properties
self.totalNumberOfTransactiondatas = ko.pureComputed(function () {
    return self.transactiondatas().length;
});
self.transactionList = ko.pureComputed(function () {
    var value = $.trim( self.query() ).toLowerCase();
    return ko.utils.arrayFilter(self.transactiondatas(), function (item) {
        return !value || item.transaction_type.toLowerCase().indexOf(value) > -1;
    });
});

// API functions
self.initializeTransactionViewModel = function () {
    var url = BASEURL + 'index.php/account/TransactionData/' + auth;
    $.getJSON(url).done(self.transactiondatas);
};

// init
self.initializeTransactionViewModel();
self.query("");

注意：

totalNumberOfTransactiondatas非常适合计算属性，不能手动计算/设置。
transactionList也是如此 - 交易列表是transactiondatas和query值的直接函数，无需手动维护单独的交易项目清单。
ko.pureComputed()已在Knockout 3.2.0中引入。对旧版本使用常规ko.computed()。
Knockout observables是函数。这意味着您可以将它们用作回调。 $.getJSON(url).done(self.transactiondatas);优雅地替换了.removeAll()和$.each() + .push()的整个序列。
在viewmodel初始化期间设置self.query("")会触发重新计算totalNumberOfTransactiondatas和transactionList。当JSON稍后到达时，会再次发生同样的情况。

表空载在页面上加载knockout.js

1 个答案: