O'Reilly logo

KnockoutJS Web Development by John Farrar

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The textInput binding

We have obviously done a number of bindings to textboxes already. Now, we are going to do something new with them. We are going to put a text input and a text area on the page together. Here is our HTML markup, where we will put in a new file called text.html:

<p>Title: <input data-bind="textInput: title" /></p>
<p>Post: <textarea data-bind="textInput: post" /></textarea></p>
<p>
<h2 data-bind="text: title"></h2>
<div data-bind="text: post"></div>
</p>

If we were using the value binding we would only get an update when the input element lost focus. Using the textInput binding let us have character by character feedback. Let's add our code so we can try it out:

<script> function Blog() { this.title = ko.observable(); this.post ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required