挖空 JS 值更新'afterkeydown'事件更改不起作用

Question

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

我有一个在表单提交时调用的函数并计算定价。对于文本输入字段，我希望在用户开始更改值时立即调用定价函数。目前，这只适用于如果我点击文本输入字段之外，所以不是立即按下键/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>