Question

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

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

我很确定我的代码中需要修复它。

输入字段的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

您可以使用＆lt; input data-bind =＆＃34; textInput：pages，event：{keyup：onSubmit}＆＃34; ＆GT;

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>

淘汰js valueupdate'afterkeydown'，事件变更无效

2 个答案: