Question

我有一个输入组，其中有一个名为“小时”的字段，可以使用该字段两侧的-/ +按钮或手动键入该字段来更改此字段。

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

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

代码（函数'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>

输入值更改时可观察到的更新

1 个答案: