7 min read

Today, we will learn about three data binding abilities of Knockout.js. Data bindings are attributes added by the framework for the purpose of data access between elements and view scope. While Observable arrays are efficient in accessing the list of objects with the number of operations on top of the display of the list using the foreach function, Knockout.js has provided three additional data binding abilities:

  • Control-flow bindings
  • Appearance bindings
  • Interactive bindings

Let us review these data bindings in detail in the following sections.

Control-flow bindings

As the name suggests, control-flow bindings help us access the data elements based on a certain condition. The if, if-not, and with are the control-flow bindings available from the Knockout.js.

In the following example, we will be using if and with control-flow bindings. We have

added a new attribute to the Employee object called age; we are displaying the age value in green only if it is greater than 20. Similarly, we have added another markedEmployee. With control-flow binding, we can limit the scope of access to that specific employee object in the following paragraph. Add the following code snippet to index.html and run the program to see the if and with control-flow bindings working:




Knockout JS

Welcome to Knockout JS programming

Employee Data - Organization :
Employee First Name:
Employee Last Name:

Organization Full Name :

Observable Array Example :

First Name Last Name Age

Employee is marked with the age

Add New Employee to Observable Array

First Name : Last Name : Age :

Run the preceding program to see the if control-flow acting on the Age field, and the with control-flow showing a marked employee record with age 65:

Knockout JS programming

Appearance bindings

Appearance bindings deal with displaying the data from binding elements on view components in formats such as text and HTML, and applying styles with the help of a set of six bindings, as follows:

  • Text: —Sets the value to an element. Example:
  • HTML: —Sets the HTML value to an element. Example:
//JavaScript:

function Employee(firstname, lastname, age) {

...

this.formattedName = ko.computed(function() {

return "" + this.firstname() + "";

}, this);

}

//Html:

  • Visible: —An element can be shown or hidden based on the condition. Example:


span data-bind='text:age'>
  • CSS: —An element can be associated with a CSS class. Example:
//CSS:

.strongEmployee {

font-weight: bold;

}

//HTML:



  • Style: —Associates an inline style to the element. Example:


  • Attr: —Defines an attribute for the element. Example:

View Employee

Interactive bindings

Interactive bindings help the user interact with the form elements to be associated with corresponding viewmodel methods or events to be triggered in the pages. Knockout JS supports the following interactive bindings:

  • Click: —An element click invokes a ViewModel method. Example:
  • Value:—Associates the form element value to the ViewModel attribute. Example:
Age: 
  • Event: —With an user-initiated event, it invokes a method. Example:

Age:

  • Submit: —With a form submit event, it can invoke a method. Example:
  • Enable: —Conditionally enables the form elements. Example: last name field is enabled only after adding first name field.
Disable: —Conditionally disables the form elements. Example: last

name field is disabled after adding first name:

Last Name:

  • Checked: —Associates a checkbox or radio element to the ViewModel attribute. Example:

Gender:

  • Options: —Defines a ViewModel array for the element. Example:
//Javascript:

this.designations = ko.observableArray(['manager',

'administrator']);

//Html:

Designation: 
  • selectedOptions: —Defines the active/selected element from the 
    element. Example:
Designation: 
  • hasfocus—Associates the focus attribute to the element. Example:
First Name: 

We learned about data binding abilities of Knockout.js. You can know more about external data access and Hybrid Mobile Application Development from the book Oracle JET for Developers.

Read More

Text and appearance bindings and form field bindings

Getting to know KnockoutJS Templates

 

 


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here