Introduction:

  • In this article we will learn how to use text binding in KnockoutJS or what is text binding in KnockoutJS or why use text binding in KnockoutJS with example.

Description:

knockoutJS text binding basically used to updates the text such as span or paragraph tags etc. 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 make any changes in the value of the parameter it automatically updates the text.

Let’s see a simple example of knockoutJS Text binding.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TextBinding.aspx.cs"

   

    Inherits="AspDotNet.TextBinding" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

     <script src="Scripts/jquery-3.1.1.min.js"></script>

    <script src="Scripts/knockout-3.4.2.js"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <div>Employee Name: <input data-bind="value: EmployeeName" /></div>

   <p>salary of <strong data-bind="text: EmployeeName"></strong>

        has 50000 per month in india.</p>        

   <script>

 

       function EmployeeModel() {

           this.EmployeeName = ko.observable("");

       }

       ko.applyBindings(new EmployeeModel());

   </script>

    </div>

    </form>

</body>

</html>

 

Output:

 How to use Text binding in KnockoutJS


In the above code we have a div tag at the top. Inside the div we have the input element. The data-bind attribute here binds the value entered in this input tag to the “EmployeeName” parameter of the EmployeeModel view model. Next again data-bind binds the value of the EmployeeName 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 EmployeeName.

 

 I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like