KnockoutJS

KnockoutJS – Observables

3 concepts in which KnockoutJS is build upon is:
– Through observables dom elements and ViewModel exchange information
– Bindings between UI and ViewModel
– Templating web applications

To make it observable declare as:
this.property = ko.observable(‘value’);

Let’s try below Observables example:

<!DOCTYPE html>
<head>
<title>KnockoutJS - Observables</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
</head>
<body>
<!-- This is input box, used data-bind attribute to bind name to ViewModel -->
<p>Put your name here: <input data-bind="value: name" /></p>

<!-- To print value use data-bind type as text -->
<p>Hi <strong data-bind="text: name"></strong> How are you?</p>

<script>
function AppViewModel() {
<!-- ko.observable keeps an eye on name variable, any modification in data it change the respective places with changed value -->
this.name = ko.observable("John!");
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>

Computed Observable is a function which is dependent on one or more Observables. For any Observables change it will automatically update.

Syntax:

 this.variable = ko.computed(function(){
 ...
 },this);

Lets see the example below:

<!DOCTYPE html>
 <head>
 <title>KnockoutJS - Observables</title>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
 </head>
 <body>
 <p>1st no: <input data-bind="value: a" /></p>
 <p>2nd no: <input data-bind="value: b"/></p>
 <p>Multiply: <span data-bind="text: total"></span></p>
 <script>
 function AppViewModel() {
 this.a = ko.observable(5);
 this.b = ko.observable(3);
 this.total = ko.computed(function() {
 return this.a() * this.b();
 }, this);
 }
 ko.applyBindings(new AppViewModel());
 </script>
 </body>
 </html>

Namaste UI (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.