KnockoutJS First Program

KnockoutJS First Program- Let us first create a very basic and simple program in KnockoutJs to understand how it works.

KnockoutJS First Program | Hello World Example

In this tutorial we are going to create a simple example which contains two input fields- Firstname and Lastname. We will print the input box values using KnockoutJs. This example has two parts simply as below –

• 1. View – This contains the html UI parts which will be updated frequently as soon as the data model values are changed.
• 2. View Model – This contains the data model part, this sits behind UI layer and exposes data needed by a View.

View

View Part contains the following code-

<p>First name: </p>
<p>Last name: </p>
<h1>Hello, <span data-bind="text: fullName"> </span>!</h1>

View Model

View Model Part contains the following code-

Complete Example

Now let us combine the both parts and create the full example as below –

   <title>KnockoutJS Example</title>
   


<p>First name: </p>
<p>Last name: </p>
<h1>Hello, <span data-bind="text: fullName"> </span>!</h1>