This article represents high level concepts and code example for KnockoutJS, A Javascript framework based on MVVM pattern. The code below is demonstrated on the following page: http://tuts-javascript.appspot.com/helloworld-knockoutjs. Feel free to comment/suggest if I missed on any aspect.
Following is demonstrated as part of hello world demo:
View Model (in below example) could be represented in one of the following ways. In code below, the viewmodel object has a property namely, name. Following is an object representation of ViewModel.
var AppViewModel = {
name: ko.observable("Calvin Hobbes")
}
Following is another way of representing ViewModel using “function” call.
function AppViewModel () {
this.name = ko.observable("Calvin Hobbes");
}
Following code represents how data is bound with input text field and later accessed. Notice the usage of “data-bind” directive. “value: name” is used to bind value related with input textfield with model, “name”. Also, make a note of the fact that
<div class="input-group input-group-lg">
<input class="form-control col-md-8" data-bind='value: name, valueUpdate: "afterkeydown"'/>
</div>
<h1>Hello, <span data-bind="text: name"></span></h1>
Following code is used to activate Knockout framework if ViewModel (function AppViewModel() {…} in the example above) is defined using function call
ko.applyBindings(new AppViewModel());
Following code is used to activate Knockout framework if ViewModel is defined like an object:
ko.applyBindings(AppViewModel);
The code that does the magic is “observable()” method call. To achieve dynamic update behavior, one needs to declare your model properties as “observables”. These are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies. Read more about observables on this page. Following code within ViewModel object in the example below does the magic:
this.name = ko.observable("Calvin Hobbes");
Pay attention to some of the following in the code below:
<!DOCTYPE html>
<html>
<head>
<title>HelloKO</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="page-header">
<h1>Knockout HelloWorld - Code Sample</h1>
</div>
<div class="input-group input-group-lg">
<input class="form-control col-md-8" data-bind='value: name, valueUpdate: "afterkeydown"'/>
</div>
<h1>Hello, <span data-bind="text: name"></span></h1>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script>
function AppViewModel() {
this.name = ko.observable("Calvin Hobbes");
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
…
[adsenseyu1]
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…