Knockout js valueupdate 'afterkeydown' 事件更改不起作用

Question

我在用于计算产品定价的表单上使用 Knockout JS。

我有一个在表单提交时调用并计算定价的函数。对于文本输入字段，我希望在用户开始更改值时立即调用定价函数。目前这只有在我点击文本输入字段之外时才有效，所以不会立即点击 keypress/keyup，这是我想要实现的。

我很确定我的代码中有一些地方需要修复。

HTML 对于输入字段：

<div class="form-group">
    <label>Number of Pages</label>
    <input data-bind="value : pages, valueUpdate: ['afterkeydown'], event: { change: onSubmit }" >
</div>

Javascript:

self.pages = ko.observable("10");

self.onSubmit = function () {

    self.response("<div class='priceLoading'>Loading</div>");

    var servURL = "http://prices.mysite.com/getpricing/"
        + ko.utils.unwrapObservable(self.selectedCategoryValue) + "/"
        + self.pages() + "/"
        + self.copies() 

    $.get(servURL, function (response) {
        self.response(response.PriceFormatted);
    })
}

在事件更改时调用的 onSubmit 函数从服务中获取数据 xml 数据并将其写入表单。

非常感谢任何帮助！

Answer 1

您可以使用

<input data-bind="textInput : pages, event: { keyup: onSubmit }" >

Answer 2

如果您想提交对变量的每次更改，将您的 onsubmit 函数订阅到变量而不是单独的事件，这更有意义。

var self = {};

self.pages = ko.observable("10");
self.response = ko.observable();
self.copies = ko.observable("5");

self.pages.subscribe(function(newValue) {

  self.response("<div class='priceLoading'>Loading</div>");

  var servURL = "http://prices.mysite.com/getpricing/" + ko.utils.unwrapObservable(self.selectedCategoryValue) + "/" + self.pages() + "/" + self.copies()

  setTimeout(function() {
    self.response("Fetched for " + newValue);
  }, 500);
});

ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="form-group">
  <label>Number of Pages</label>
  <input data-bind="value : pages, valueUpdate:'afterkeydown'">
  <div data-bind="text:response"></div>
</div>

Knockout js valueupdate 'afterkeydown' 事件更改不起作用

knockout js valueupdate 'afterkeydown' with event change not working

javascript

event-handling

knockout.js