表空頁面加載knockout.js

所以我使用搜索框從表中搜索特定的數據。但我遇到的問題是，當頁面加載表是空的，那麼什麼是加載數據表的最佳方式是即使沒有值輸入在特定的搜索框中，並應顯示所有數據桌子。我正在從數組中搜索數據。表空頁面加載knockout.js

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

來源

2016-04-08 FaF

輸入組織你的視圖模型是這樣的：

// 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是一個計算的完美契合財產，不要c手動進行alculate/set。
同樣爲transactionList - 交易列表是transactiondatas和query值的直接功能，沒有必要手動保持交易項目單獨列表。
ko.pureComputed()已經在Knockout 3.2.0中引入。舊版本使用常規ko.computed()。
敲除observables是函數。這意味着你可以使用它們作爲回調。 $.getJSON(url).done(self.transactiondatas);優雅地取代您的整個序列.removeAll()和$.each() + .push()。
在視圖模型初始化期間設置self.query("")會觸發重新計算totalNumberOfTransactiondatas和transactionList。 JSON在幾分鐘後到達時再次發生。

來源

2016-04-08 10:51:29 Tomalak

我試過了，它沒有工作，基本上沒有加載頁面上的任何東西 – FaF

檢查你的控制檯是否有錯誤。還要注意我已經重命名了你的變量 - 只有構造函數應該以大寫字母開頭。不要複製和粘貼代碼。閱讀並理解。 – Tomalak

作爲回調的可觀察對象，這是優雅的。我不確定我是否會使用它，因爲它剝奪了您有機會做任何事情*其他*。 –

表空頁面加載knockout.js

回答

相關問題