淘汰賽。如何在可觀察更新前後執行自定義代碼

我有一個顯示在頁面中的用戶數組。而且我有一對輸入文本框來過濾名稱和姓氏顯示的用戶。我希望當輸入文本字段中的任何值發生更改時，用戶數組都會更新。淘汰賽。如何在可觀察更新前後執行自定義代碼

這裏是我有才達到該代碼：

淘汰賽視圖模型：

function HomeViewModel() { 
    var self = this; 

    self.users = ko.observableArray([]); 

    self.FilterByName = ko.observable(''); 
    self.FilterByLastName = ko.observable(''); 

    self.FilteredUsers = ko.observableArray([]); 
    self.FilteredUsersComputed = ko.computed(function() { 
     var result = self.users().filter(function (user) { 
      return (user.name.toUpperCase().includes(self.FilterByName().toUpperCase()) && 
       user.lastName.toUpperCase().includes(self.FilterByLastName().toUpperCase()) 
      ); 
     }); 
     self.FilteredUsers(result); 
    }); 

    $.getJSON("/api/User", function (data) {    
     self.users(data); 
    }); 
} 

ko.applyBindings(new HomeViewModel());

HTML：

 <div> 
      <label>Name:</label> 
      <input data-bind="textInput: FilterByName" /> 
     </div> 
     <div> 
      <label>Lastname:</label> 
      <input data-bind="textInput: FilterByLastName" /> 
     </div> 

(...) 

     <div id="LLAdminBodyMain" class="container"> 
      <div class="row justify-content-center" data-bind="foreach: FilteredUsers"> 
       <div class="col-md-6 col-lg-4"> 
        <p data-bind="text: name"></p> 
       </div> 
      </div> 
     </div>

問題：

現在我想要得到的以下影響：

延遲執行FilteredUsers「計算的函數，以便在每次在名稱或姓氏字段中按下鍵時不觸發。即：等待2秒鐘沒有按鍵事件;或者在kepress之後等待1或2秒以執行計算的功能。
當FilteredUsers被觸發時，首先淡出LLAdminBodyMain，然後更新FilteredUsers，然後使用新元素淡入LLAdminBodyMain。

要做到這一點，我認爲知道如何檢測knockout是否要更新observable並在更新並傳播新值之前執行我的自定義代碼會很有用。

我試過做類似的事情，但下面的代碼不起作用：淘汰賽不再檢測到變化。

self.FilteredUsersComputed = ko.computed(function() { 
     console.log("In"); 
     $("#LLAdminBodyMain").fadeOut(function() { 
      var result = self.users().filter(function (user) { 
       return (user.name.toUpperCase().includes(self.FilterByName().toUpperCase()) && 
        user.lastName.toUpperCase().includes(self.FilterByLastName().toUpperCase()) 
       ); 
      }); 
      self.FilteredUsers(result); 
     }).delay(1000).fadeIn(); 

    });

謝謝。

來源

2017-09-21 MorgoZ

http://knockoutjs.com/documentation/rateLimit-observable.html –

延遲FilteredUsers的計算函數的執行，在Name或Lastname字段中每次按下鍵時都不會觸發。即：等待2秒鐘沒有按鍵事件;或者在kepress之後等待1或2秒以執行計算的功能。

請參閱http://knockoutjs.com/documentation/rateLimit-observable.html。此外，最好有一臺可觀察計算機只返回計算值，而不是設置單獨的可觀察值。

self.FilteredUsers = ko.computed(function() { 
    var result = self.users().filter(function (user) { 
     return (user.name.toUpperCase().includes(self.FilterByName().toUpperCase()) && 
      user.lastName.toUpperCase().includes(self.FilterByLastName().toUpperCase()) 
     ); 
    }); 
    return result; 
}).extend({ rateLimit: {timeout: 2000, method: "notifyWhenChangesStop"} });

當FilteredUsers被觸發，首先淡出LLAdminBodyMain，然後更新FilteredUsers，然後在LLAdminBodyMain新元素褪色。

你要使用的foreach的afterAdd和beforeRemove回調。請參閱http://knockoutjs.com/documentation/foreach-binding.html#note-7-post-processing-or-animating-the-generated-dom-elements和http://knockoutjs.com/examples/animatedTransitions.html

來源

2017-09-21 15:38:20

淘汰賽。如何在可觀察更新前後執行自定義代碼

回答

相關問題