当输入值改变时更新可观察值

Question

我有一个输入组，其中包含一个名为 'hours' 的字段，可以使用字段两侧的 -/+ 按钮或在字段中手动输入来更改此字段。

当使用 -/+ 按钮时，值会正确更新，但当用户在输入框中手动输入值时，我无法更新它。

由于我无法使用订阅的设置，因为当按钮也更改值时会触发订阅。有什么办法可以解决这个问题吗？

代码（函数 'subHours' 和 'addHours' 只是将 -/+ 1 添加到当前值）：

<div class="input-group">\
    <span class="input-group-btn">\
          <button type="button" class="btn btn-default" data-bind="click: subHours">\
               <span class="glyphicon glyphicon-minus"></span>\
           </button>\
    </span><input type="text" class="form-control" data-bind="textInput: hours"/>\
    <span class="input-group-btn">\
           <button type="button" class="btn btn-default" data-bind="click: addHours">\
                <span class="glyphicon glyphicon-plus"></span>\
           </button>\
    </span>\
</div>\

我想以与单击按钮时类似的方式调用函数。

Answer 1

从 ko.toJSON().

可以看出，它似乎正在正确更新

var viewModel = function(){
  var self = this;
  this.hours = ko.observable(0);
  this.subHours = function(){
    self.hours(self.hours()-1);
  };
  this.addHours = function(){
    self.hours(self.hours()+1);
  };
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="input-group">
    <span class="input-group-btn">
          <button type="button" class="btn btn-default" data-field="week.id" data-bind="click: subHours">Sub
               <span class="glyphicon glyphicon-minus"></span>
           </button>
    </span><input type="text" name="week.id" class="form-control" data-bind="textInput: hours"/>
    <span class="input-group-btn">
           <button type="button" class="btn btn-default" data-field="week.id" data-bind="click: addHours">Add
                <span class="glyphicon glyphicon-plus"></span>
           </button>
    </span>
</div>


<span data-bind="text: ko.toJSON(hours)"></span>

当输入值改变时更新可观察值

Update observable when input value changes

javascript

knockout.js