Update observable when input value changes

Question

I have a input group with a field called 'hours', this field can be changed either using -/+ buttons on each side of the field, or by manually typing in the field.

When using the -/+ button the value is updated correctly, but I cannot get it to update when the user types in the value manually in the input box.

Due to the setup I cant use subscribe, since that is triggered when the buttons change the values too. Is there some way I can solve this?

Code (functions 'subHours' and 'addHours' just adds -/+ 1 to the current value):

<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>\

I would like to call a function in a similar way to when a button is clicked.

@Ray what current JS code? The functions that get called when pressing the buttons? Because that is the only JS code that is related to this. And a simple observable called 'hours' — Majs, Oct 08 '18 at 09:11
Possible duplicate of [Number input box in Knockout JS](https://stackoverflow.com/questions/39394445/number-input-box-in-knockout-js) — Ray, Oct 08 '18 at 09:37

score 0 · Accepted Answer · answered Oct 08 '18 at 09:15

It seems to be updating correctly, as seen from the 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>

Hmm, clicking "Run code snippet" I get the same behaviour I'm getting in my solution. i.e sometimes it's treated as a string. Try manually adding numbers to the field then clicking -/+ buttons. — Majs, Oct 08 '18 at 09:33
Yes, that is how it's intended to work. If you want to ensure that it's always numeric you need to use extenders or custom bindings https://stackoverflow.com/questions/17048468/make-an-input-only-numeric-type-on-knockout, https://stackoverflow.com/questions/39394445/number-input-box-in-knockout-js — Ray, Oct 08 '18 at 09:37

Update observable when input value changes

1 Answers1