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’);
<!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> In a world where digital presence is paramount, the question isn't whether you should do…
Over the years, people have experimented with various methods to maintain healthy and beautiful hair.…
Your brand more than developing an attractive and creative logo and infectious motto. It's the…
Introduction Are you someone who has suffered from a personal injury and want to file…
Operating from home has emerged as one of the most popular ways of doing jobs…
If the consequences of our society’s ever-growing debt are what worries you, then it is…