如果用户在输入上按 Enter 键，则取消挖空速率限制扩展器

cancel knockout ratelimit extender if user press Enter on an input

本文关键字：空速 取消 速率 扩展器 输入 用户 Enter 如果      更新时间：2023-09-26

我向服务器发送一个AJAX请求，其中包括我想要从服务器获得的页码。

我使用输入框从用户那里获取此页码。

我使用此代码：

   (function($) {
     $(function() {
         // Overall viewmodel for this screen, along with initial state
         function CartableViewModel(totalItems) {
           var self = this;
           // Editable data
           self.data = ko.observable();
           self.pageIndex = ko.observable(1).extend({
             rateLimit: {
               method: "notifyWhenChangesStop",
               timeout: 1500
             }
           });

           ko.computed(function() {
             Mostafa.myApp.Order.Cartable("CreatorID=23 & (CreatorID=23|CreatorID>23)", self.pageSize(), function(data) {
               self.data(data);
             });
           });
         });
     }
     Mostafa.myApp.Order.CartableViewModel = new CartableViewModel();
     ko.applyBindings(Mostafa.myApp.Order.CartableViewModel);
   });
   $("#form_page_select").on("submit", function() {
   return false;
   });
   })(jQuery);

我的 HTML 是：

<form id="form_page_select">
  <input type="number" id="input_page_select" min="1" data-bind='value: pageIndex, valueUpdate: ["input", "keypress"]' />
</form>

实际上，我使用另一个java脚本方法发送此AJAX请求，该方法的名称为" Mostafa.myApp.Order.Cartable（）"，并且工作正常。

我的问题是：我如何不仅在超时后发送此 Ajax 调用，而且如果用户在此输入字段上按 Enter 键，我如何发送此 Ajax 调用。

多谢

您可以使用 订阅 from knockoutjs 来实现您正在寻找的功能。

相同的小演示

function model(){
    var self = this;
    self.pageIndex = ko.observable(5).extend({ rateLimit: 1500 });
    self.pageIndex.subscribe(function(newValue) {
      alert(newValue);
      //Call here your ajax call
      //Subscribe will be called on every change of your PageIndex
    });
};
var mod = new model();
ko.applyBindings(mod);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<input type="number" id="input_page_select" min="1" data-bind='value: pageIndex, valueUpdate: ["input", "keypress"]' />

相关文章：