KnockoutJS - Text Binding

Text binding causes the associated DOM element to display the text value of the parameter. This is used in text-level DOM elements such as <span> or <em>. The text binding accepts any data type and parses it into String before rendering it.
Syntax
text: <binding-value>

Parameters
KO sets the element's content to a text node with your parameter value. Any previous content will be overwritten.
KO sets the element's content to a text node with your parameter value. Any previous content will be overwritten.
If the parameter is an observable, then the element value is updated whenever the underlying property changes, else it is assigned only for the first time.
If the parameter is an observable, then the element value is updated whenever the underlying property changes, else it is assigned only for the first time.
If anything other than a Number or a String is passed, then KO parses it into a String format equivalent to yourParameter.toString().

If anything other than a Number or a String is passed, then KO parses it into a String format equivalent to yourParameter.toString().

The parameter value can also be JavaScript function or arbitrary JavaScript expression that returns a text value.
The parameter value can also be JavaScript function or arbitrary JavaScript expression that returns a text value.
Example
Let us take a look at the following example which demonstrates the use of text binding.
<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind = "text: hiThere"></p>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Hi TutorialsPoint !!!");
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in text-bind.htm file.
Save the above code in text-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Hi TutorialsPoint !!!
Example
Let us take a look at another example in which the text is derived using Computed Observable.
<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>Your full Name is <span data-bind="text: fullName"></span></p>

      <script>
         function AppViewModel() {
            this.firstName= ko.observable("John");
            this.lastName= ko.observable("Smith");

            this.fullName = ko.computed( function() {
               return this.firstName()+" "+this.lastName();
            },this);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   
   </body>
</html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in text-bind-fun.htm file.
Save the above code in text-bind-fun.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Your full Name is John Smith
The text binding escapes HTML entities, meaning that it is possible to set any String value without getting it injected. For example −
viewModel.message("<strong>Hi TutorialsPoint !!!</strong>");
The above code will just print <strong>Hi TutorialsPoint !!!</strong> on the screen. It will not make the text bold.
Sometimes it is not possible to use HTML element to set the text inside another element. In such cases, container-less syntax can be used which consists of comment tags shown as follows −
The <!--ko--> and <!--/ko--> comment works as start and end markers making it a virtual syntax and binds the data as if it is a real container.
Let us take a look at the following example.
<!DOCTYPE html>
   <head>
      <title>KnockoutJS container less text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind="text: hiThere"></p>
      <select data-bind="foreach: items">
         <option> <!--ko text: $data --><!--/ko--></option>
      </select>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Days of week !!!");
            this.items = (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday',
               'Sunday']);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in text-bind-containerless.htm file.
Save the above code in text-bind-containerless.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Note, that $data binding context is used here to display the current item from the array.
Note, that $data binding context is used here to display the current item from the array.
Days of week !!!

    38 Lectures 
     2 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page