Question

我有一个绑定到observable的文本字段：

<input type="text" data-bind="value: chartOptions.zoomLevel" value="100%" />

这样可以正常工作，除了在更新observable之前字段需要失去焦点。我需要的是更新observable仅在按下回车键时改变。

我看过the possible valueUpdate parameters，但似乎没有一个适合。

Answer 1

可能有一种方法可以使用custom bindings执行此操作，但这是使用the event binding执行此操作的简单方法。您似乎暗示，如果按下回车键，observable应仅更改。但是，我也将blur事件添加为触发器;无论如何，它很容易删除。

＆＃13;

var ViewModel = function() {
  var self = this;
  
  self.zoomLevel = ko.observable('100');
  self.newZoomLevel = ko.observable('100');
  
  self.tryCommitZoomLevel = function(data, event) {
    if (event.keyCode === 13 || event.type === "blur") {
      self.zoomLevel(event.target.value);
    }
    
    // Make sure the event bubbles to let the value binding also handle events:
    return true;
  };
};

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="event: { keypress: tryCommitZoomLevel, blur: tryCommitZoomLevel }, value: newZoomLevel" />
<br />
The zoom level you've entered is: <strong data-bind="text: zoomLevel"></strong>%

＆＃13;

该片段保留了一个独立的新价值＆＃34;实际observable的副本，并且只有在用户按Enter键或输入失去焦点时才提交。

Answer 2

这是一个可能有用的polyfill-迫使IE在enter键上触发“ change”事件（就像其他浏览器一样），从而触发Knockout的value绑定。

var isIE = !!document.documentMode;
if (isIE) {

    $("body").on("keydown", "input[type='text']", function (e) {

        // Ensure 'value' binding is fired on enter in IE
        if ((e.keyCode || e.which) === 13) {
            $(this).blur();
        }
    });
}

仅在输入键按下时更新可观察绑定到输入值

2 个答案: