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.

  • 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().

  • 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.

Live Demo 
<!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.

  • Open this HTML file in a browser.

Example

Let us take a look at another example in which the text is derived using Computed Observable.

Live Demo 
<!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.

  • Open this HTML file in a browser.

Observations

HTML encoding

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.

Using text without container element

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.

Live Demo 
<!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.

  • Open this HTML file in a browser.

  • Note, that $data binding context is used here to display the current item from the array.

knockoutjs_declarative_bindings.htm
Advertisements