淘汰赛。如何在可观察更新前后执行自定义代码

问题描述：

我有一个显示在页面中的用户数组。而且我有一对输入文本框来过滤名称和姓氏显示的用户。我希望当输入文本字段中的任何值发生更改时，用户数组都会更新。淘汰赛。如何在可观察更新前后执行自定义代码

这里是我有才达到该代码：

淘汰赛视图模型：

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

    });

谢谢。

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

淘汰赛。如何在可观察更新前后执行自定义代码

相关推荐