KnockoutJS Text & HTML Bindings

In the last tutorial we saw how visible binding control the appearance of an html element. In this article we shall see two more types of bindings i.e. knockoutJS text & html bindings. We have previously used the former binding, however in this article we shall study its nitty-gritty. So, let the fun begin!

KnockoutJS Text Bindings

Simply put, the text binding changes the value for the text attribute of the tag. Typically text binding updates the em, span or paragraph tags. Behind the scenes, the text binding replaces the default content of the html element with text node having value passed as parameter. If the parameter is observable then any change in the value of the parameter automatically updates the text. Take a look at the following example to see text binding in action.

<!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: <input data-bind="value: StudentName" /></p>
   <p>Student  <strong data-bind="text: StudentName"></strong> obtained 90% marks.</p>

   <script>

   function StudentModel() {
       this.StudentName = ko.observable("");
   }

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

Download the code Try the code

Let’s start from the paragraph tag at the top. Inside the paragraph we have the input element. The data-bind attribute here binds the value entered in this input tag to the “StudentName” parameter of the StudentModel view model. Next again data-bind binds the value of the StudentName parameter to “text” attribute of the strong tag inside the paragraph. Now if you enter any name in the text box and press the enter key. The corresponding value in the paragraph shall be updated immediately. This is because we have used “observable” with StudentName.

KnockoutJS HTML Binding

The html binding as the name suggests updates the content of any html DOM element and replaces it with html specified by the parameter in JavaScript view model. If the parameter is an observable, updating the parameter’s value updates the corresponding html. Take a look at the following example.

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

<body>
    
<div data-bind="html: StudentName">  </div>
 
   <script>

   function StudentModel() {
       this.StudentName = ko.observable("<h1>The name of the student</h1>");
   }


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

Download the code Try the code

In the above example, some html has been assigned to the StudentName parameter of the StudentModel view model in the JavaScript section. In the html view the html of the div is associated with StudentName, therefore div shows an h1 element with some text as specified by StudentName parameter. This article explains knockoutJS text & html bindings. In the next article we shall see CSS bindings.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .