KnockoutはObservableオブジェクトの動作を拡張することができます。組み込みで Rate-Limiting というエクステンダーがあるので使ってみました。 Rate-Limiting を使うことで、オブザーバブルオブジェクトの変更を subscribe しているリスナーへの通知を一定時間もしくは入力が停止した後一定時間遅らせることができます。即時に変更を通知する必要がない場合やオートコンプリートを実装するときなどに利用できると思います。
動作確認は KnockoutJS 3.3 で行っています。
1.サンプル
使用するサンプルです。とくに面白いことはしていませんが、変更通知が遅延することを確認するために alert ダイアログを表示しています。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <input type="text" data-bind="textinput: text" /><br/><br/> <input type="text" data-bind="textinput: text2" /> <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script> <script type="text/javascript"> function ViewModel() { var self = this; self.text = ko.observable('').extend({ rateLimit: 1000 }) self.text.subscribe(function (value) { alert('changed1:' + value) }) self.text2 = ko.observable('').extend({ rateLimit: { timeout: 1000, method: "notifyWhenChangesStop" } }) self.text2.subscribe(function (value) { alert('changed2:' + value) }) } ko.applyBindings(new ViewModel()) </script> </body> </html>
簡単ですが、サンプルは以上です。