Categories: Javascript

KnockoutJS Hello World – Code Example

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:

  • ViewModel used to represent data and operations on a UI
  • Data Binding: Declarative data binding used to create an associated view
  • Activating Knockout
  • Dynamic Updates: How UI updates dynamically
  • Code Example: Hello World Code Sample

 

ViewModel Representation

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");
}

 

Declarative Data Binding

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>

 

Activating Knockout

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);

 

How UI is updated Dynamically?

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");

 

Hello World Code Example

Pay attention to some of the following in the code below:

  • Input text field is bound (data-bind attribute) with model name, and an event, afterkeydown that updates the model, name. valueUpdate makes sure that “name” used elsewhere (<span data-bind=”text: name”></span>) in the view (UI) gets updated as the input is updated.
<!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]

Nidhi Rai

Nidhi has been been actively blogging in different technologies such as AI / machine learning and internet technologies. Her field of interest includes AI / ML, Java, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.

Share
Published by
Nidhi Rai
Tags: knockoutjs

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago