Observables are JavaScript objectsthat have the abilityto notify others when they have been changed. Supposed we have  firstnameObservable type property and it used more than one places when we change firstname value that data is automatically reflected to all places wherever it is used.We create observables by using the ko.observable function:

 

You just need to declare ViewModel property with function ko.observable() to make it Observable.

this.FirstName = ko.observable();

Example

 

@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>index</title>
<linkhref="/Content/bootstrap.css"rel="stylesheet"/>
</head>
<body>
<divclass="container"style="margin-top: 7%;">
<divclass="row">
<divclass="col-md-8">
<divclass="panel panel-default">
 
<divclass="panel-heading">
<b> Observables </b>
</div><!-- END HEADING-->
 
<divclass="panel-body">
<divclass="col-md-12">
<divclass="form-group">
<labelfor="FirstName">First Name</label>
<inputtype="text"id="FirstName"class="form-control"data-bind="value:FirstName"placeholder="First Name"/>
</div><!-- END FIRST NAME -->
 
<divclass="form-group">
<labelfor="LastName">Last Name</label>
<inputtype="text"id="LastName"class="form-control"data-bind="value:LastName"placeholder="Last Name"/>
</div><!-- END Last Name -->
</div>
<divclass="col-md-12">
<h2>Your Name is <spandata-bind="text: FirstName"></span><spandata-bind="text: LastName"></span>.</h2>
</div>
 
 
</div><!-- END BODY-->
 
</div><!-- END PANEL-->
 
</div><!-- END COL-MD-8-->
 
</div><!-- END ROW-->
 
</div><!-- END CONTAINER-->
<!--jQuery (necessary for Bootstrap's JavaScript plugins) -->
<scriptsrc="/Scripts/jquery-3.1.1.min.js"></script>
 
<scriptsrc="/Scripts/bootstrap.min.js"></script>
<!--KnockOutJslibrairies-->
<scriptsrc="/Scripts/knockout-3.4.1.js"></script>
 
<scripttype="text/javascript">
 
        $(document).ready(function () {           
 
functionviewModel() {
this.FirstName = ko.observable("");
this.LastName = ko.observable("");
            }
ko.applyBindings(newviewModel());
 
        });      
 
</script>
</body>
</html>

 

<inputtype="text"id="FirstName"class="form-control"data-bind="value:FirstName"placeholder="First
Name"/>
<inputtype="text"id="LastName"class="form-control"data-bind="value:LastName"placeholder="Last Name"/>

above line is for input box. As you see, we have used data-bind attribute to bind fristName and LastName value to ViewModel.

<h2>Your Name is <spandata-bind="text: FirstName"></span><spandata-bind="text: LastName"></span>.</h2>

above line just prints value of fristName and LastName. Note that here data-bind type is text as we are simply reading value.

this.FirstName = ko.observable("");
this.LastName = ko.observable("");

 

ko.observable keeps an eye on FirstName,LastNamevariable for any modification in data, once it happens then corresponding places also get updated with changed value.

Output


knockout observable property

0 comments


Leave a comment

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

You may also like