[英]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. 输入值是通过JavaScript而不是通过剔除视图模型更改的。 How can I best subscribe to that change and record the new value into the viewmodel?
如何最好地订阅该更改并将新值记录到视图模型中?
You can use the data-bind="textInput: firstName" to update on input. 您可以使用data-bind =“ textInput:firstName”更新输入。
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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.