CODEWITHSUNDEEP
jqueryknockout.js
Blaise
Blaise

Reputation: 22242

How to subscribe input value change into knockout view model?

Here is the example code.

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
 	this.firstName.subscribe(function(newVal){
   	alert('changed into ', newVal);
  });
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to 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 is changed by a JavaScript, not through the knockout viewmodel. How can I best subscribe to that change and record the new value into the viewmodel?

Upvotes: 0

Views: 1864

Answers (1)

B. Darren Olson
B. Darren Olson

Reputation: 91

You can use the data-bind="textInput: firstName" to update on input.

Check this updated version of your 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 into ', newVal);
  });

    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

function change(){
    document.getElementById('ln').value ='Mars';
}

Upvotes: 1

Related Questions