jquery - How to subscribe input value change into knockout view model? -

here example code.

// here's data model  var viewmodel = function(first, last) {      this.firstname = ko.observable(first);      this.lastname = ko.observable(last);      	this.firstname.subscribe(function(newval){     	alert('changed ', newval);    });         this.fullname = ko.computed(function() {          // knockout tracks dependencies automatically. knows fullname depends on firstname , lastname, because these called when evaluating fullname.          return this.firstname() + " " + this.lastname();      }, this);  };     ko.applybindings(new viewmodel("planet", "earth")); // makes knockout work    function change(){      document.getelementbyid('ln').value ='mars';  }

body { font-family: arial; font-size: 14px; }  .liveexample { padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; }  .liveexample input { font-family: arial; }  .liveexample b { font-weight: bold; }  .liveexample p { margin-top: 0.9em; margin-bottom: 0.9em; }  .liveexample select[multiple] { width: 100%; height: 8em; }  .liveexample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class='liveexample'>         <p>first name: <input id="fn" data-bind='value: firstname' /></p>       <p>last name: <input id="ln" data-bind='value: lastname' /></p>       <h2>hello, <span data-bind='text: fullname'> </span>!</h2>        <button onclick="change()">      change      </button>  </div>

the input value changed javascript, not through knockout viewmodel. how can best subscribe change , record new value viewmodel?

you can use data-bind="textinput: firstname" update on input.

check updated version of code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='liveexample'>        <p>first name: <input id="fn" data-bind='value: firstname, textinput: firstname' /></p>      <p>last name: <input id="ln" data-bind='value: lastname, textinput: lastname' /></p>      <h2>hello, <span data-bind='text: fullname'> </span>!</h2>       <button onclick="change()">     change     </button> </div>  body { font-family: arial; font-size: 14px; } .liveexample { padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; } .liveexample input { font-family: arial; } .liveexample b { font-weight: bold; } .liveexample p { margin-top: 0.9em; margin-bottom: 0.9em; } .liveexample select[multiple] { width: 100%; height: 8em; } .liveexample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }  var viewmodel = function(first, last) {     this.firstname = ko.observable(first);     this.lastname = ko.observable(last);      this.firstname.subscribe(function(newval){     alert('changed ', newval);   });      this.fullname = ko.computed(function() {         // knockout tracks dependencies automatically. knows fullname depends on firstname , lastname, because these called when evaluating fullname.         return this.firstname() + " " + this.lastname();     }, this); };  ko.applybindings(new viewmodel("planet", "earth")); // makes knockout work  function change(){     document.getelementbyid('ln').value ='mars'; }