Wie wird der Eingabewert in das Knockout-View-Modell übernommen?

Question

Hier ist der Beispielcode.

// Here's my data model 
 
var ViewModel = function(first, last) { 
 
    this.firstName = ko.observable(first); 
 
    this.lastName = ko.observable(last); 
 
    
 
    \t this.firstName.subscribe(function(newVal){ 
 
    \t 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>

Der Eingangswert wird durch ein JavaScript, um nicht durch das Ko-Ansichtsmodell geändert. Wie kann ich diese Änderung am besten abonnieren und den neuen Wert im Viewmodel aufzeichnen?

Answer 1

Sie können die Datenbindung = "textInput: firstName" verwenden, um die Eingabe zu aktualisieren.

Aktivieren Sie diese aktualisierte Version des Codes:

<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'; 
}