ノックアウト。可読な更新の前後にカスタムコードを実行する方法

Question

ページに表示されるユーザーの配列があります。私は名前と姓で表示されるユーザーをフィルタリングする入力テキストボックスのペアを持っています。 入力テキストフィールドの値のいずれかが変更されると、ユーザーの配列が更新されます。

ここ

が、私はそれをachiveしなければならないコードは次のとおりです。

ノックアウトのviewmodel：

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> 

QUESTION：

今私が取得したいです次の効果：

1. FilteredUsers '計算機能の実行が、[名前]フィールドまたは[姓]フィールドでキーが押されるたびに実行されないようにすることを遅延します。すなわち、2秒間キー押下イベントがなくなるまで待機する。または計算された機能を実行するためにkepressの後1秒または2秒待つだけです。
2. FilteredUsersが実行された場合は、まずLLAdminBodyMainをフェードアウトし、FilteredUsersを更新してから、新しい要素でLLAdminBodyMainをフェードインします。

これを行うには、ノックアウトが観測値を更新して、カスタム値を更新して新しい値を伝播する直前に検出する方法を知っておくと便利だと思います。

私は同様のことを試みましたが、次のコードは機能しません。knockoutはこれ以上変更を検出しません。

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

    }); 

ありがとうございます。

Answer 1

[名前]または[姓]フィールドでキーが押されるたびにFilteredUsersの計算された関数が実行されないようにすることを遅延します。すなわち、2秒間キー押下イベントがなくなるまで待機する。または計算された機能を実行するためにkepressの後1秒または2秒待つだけです。

http://knockoutjs.com/documentation/rateLimit-observable.htmlを参照してください。別の観測値を設定するのではなく、コンピュータが観測値を返すだけの方が良いでしょう。 FilteredUsersが発射された場合

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をフェードイン、その後、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