KnockoutJS Environment Setup

The last article provided a very brief introduction to KnockoutJS. In this article we shall get our hands dirty and write our first KnockoutJS application. But before that we shall see how we can perform knockoutJS environment setup so that we can run our knockoutJS applications locally.

KnockoutJS Environment Setup

There are two ways to locally setup your knockoutJS environment. Simply go to this website and download the knockoutjs library and then reference it via script tag.

The other way is to use a KnockoutJS cdn and simply reference it in your applications. In all of the code samples in this article series we shall use the second approach. So in the header section, inside the src attribute of your script tag, add this link “https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js”. Take a look at the first example to see how things actually work.

First Application

Take a look at the following code snippet, we shall explain the code in the section that follows:

<!DOCTYPE html>
<html>
    
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    
</head>

<body>
    
<p>Student Name: <strong data-bind="text: Name"></strong></p>
<p>Student Age: <strong data-bind="text: Age"></strong></p>
    
    
<script>
    function StudentModel() {
    this.Name = "Thompson";
    this.Age = "20";
}

ko.applyBindings(new StudentModel());
    
</script>
    
</body>
</html>

Download the code Try the code

Now carefully take a look at the above code. Inside the body tag you can see two paragraph tags. This is basically an html view. After the paragraph tags, we have some JavaScript code. This code is JS view model. In this script we create a model named StudentModel. The model has two properties, name and age. To bind this JS view model to the HTML DOM we use ko.applyBindings method and pass it the name of the mode.

Now again come back to the paragraph tags we created earlier. Here we can access the members of the view model via data-bind attribute. This attribute takes two values, first is the HTML attribute that you want to change and second is the value of the property of the view model. For instance in the paragraph tag, we use data-bind to assign value of Name and Age properties of StudentModel to the text attribute of the two paragraphs.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .