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>
For any types of queries, you can contact us on info[at]namasteui.com.