Knockout.js: Built in Bindings

Introduction:
The Built in bindings are built into knockout.js and facilitate binding to attribute for elements. We can use multiple bindings separated by commas.

The built in bindings are categorized as:

1. Bindings to control text and appearance

  • text
  • html
  • visible
  • css
  • style
  • attr

2. Bindings to work with form fields

  • click
  • event
  • submit
  • enable
  • disable
  • value
  • hasFocus
  • checked
  • options
  • selectedOptions
  • uniqueName

3. Control flow bindings

  • foreach
  • if
  • ifnot
  • with

1. Bindings to control text and appearance

The text binding:
It causes the associated DOM element to display text value.

The ViewModel

var viewModel = {
message: “text binding message”
};

The HTML

The message is: <span data-bind=”text: message”></span>

The Output

The message is: text binding message

The html binding:
It causes the associated DOM element to display HTML text.

The ViewModel

var viewModel = {
htmlMessage: “<p>html binding message</p>”
};

The HTML

The message is: <span data-bind=”html: htmlMessage”></span>

The Output

The message is: <p>html binding message</p>

The visible binding:
It causes the associated DOM element to become hidden or visible.

The ViewModel

var viewModel = {
isShowMessage: true
};

The HTML

<div data-bind=”visible: isShowMessage”>
This message will be shown only when “isShowMessage” is true.
</div>

The Output

This message will be shown only when “isShowMessage” is true.

The css binding:
It adds or removes css classes to the associated DOM element.

The Style

.profitWarning {
color: Red;
}

The ViewModel

var viewModel = {
profit: 99
};

The HTML

<div data-bind=”css: { profitWarning: profit < 100 }”>
Profit Information
</div>

The Output

Profit Information

The style binding:
It adds or removes styles to the associated DOM element.

The ViewModel

var viewModel = {
profit: 99
};

The HTML

<div data-bind=”style: { color: profit < 100 ? ‘red’ : ‘black’ }”>
Profit Information
</div>

The Output

Profit Information

The attr binding:
It sets the value of any attribute for the associated DOM element.

The ViewModel

var viewModel = {
url: “https://www.google.co.in/“,
details: “google web site”
};

The HTML

<a data-bind=”attr: { href: url, title: details }”>Google link </a>

The Output

2. Bindings to work with form fields

The click binding:
It adds a click event handler to the associated DOM element.

The ViewModel

var viewModel = {
showAlert: function() {
alert(‘hi’);
}
};

The HTML

<button data-bind=”click: showAlert”>Click me</button>

The Output

It will show a button and after clicking on this button it will show alert message.

The event binding:
It allows to add an event handler for a specified event to the associated DOM element. This can be used to bind to any event, such as click,  keypress, mouseover or mouseout.

The ViewModel

var viewModel = {
showAlert: function() {
alert(‘hi’);
}
};

The HTML

<div data-bind=”event: { mouseover: showAlert }”>
Mouse over me
</div>

The Output

It will show message “Mouse over me” and on mouse over of this it will show alert .

The submit binding:
It adds an event handler so that the javascript function will be invoked when the associated DOM element is submitted. We typically use this on form elements.

The ViewModel

var viewModel = {
showAlert: function() {
alert(‘hi’);
}
};

The HTML

<form data-bind=”submit: showAlert”>
<button type=”submit”>Submit</button>
</form>

The Output

It will show submit button and on click on this it will show alert .

The enable binding:
It causes the associated DOM element to be enabled when the parameter value is true. This is useful with elements like input, select and textarea.

The ViewModel

var viewModel = {
isEnabled: false
};

The HTML

<input type=’text’ data-bind=”enable: isEnabled” />

The Output

It will show textbox disabled as the viewModel property “isEnabled” is false.

The disable binding:
It causes the associated DOM element to be disabled when the parameter value is true.This is useful with elements like input, select and textarea.

The ViewModel

var viewModel = {
isDisabled: true
};

The HTML

<input type=’text’ data-bind=”disable: isDisabled” />

The Output

It will show textbox disabled as the viewModel property “isDisabled” is true.

The value binding:
It is like text binding, but the only difference is that it is a two-way binding. This is useful with elements like input, select, textarea.
-> The associated element value will be updated when viewmodel property will change.
-> When the user edits the value in the associated element, it updates the value of view model property.

The ViewModel

var viewModel = {
userName: ko.observable(“Rakesh”)
};

The HTML

Login name: <input data-bind=”value: userName” />

The Output

Login Name: Rakesh

The hasFocus binding:
It is a two-way binding.
-> The associated element will become focused or unfocused according to viewmodel property is true or false.
-> The viewmodel property will be set true or false when user manually focuses or unfocuses the associated element.

The ViewModel

var viewModel = {
isFocus: true
};

The HTML

<input data-bind=”hasFocus: isFocus” />

The Output

It will display textbox with focus as viewmodel property “isFocus” is true.

The checked binding:
It links a checkable form control(a checkbox or a radio button) with a viewmodel property.

The ViewModel

var viewModel = {
isChecked: true
};

The HTML

<input type=”checkbox” data-bind=”checked: isChecked” />

The Output

It will display checkbox with checked as viewmodel property “isChecked” is true.

The options binding:
This binding is only used with dropdownlist. It is used to populate items in dropdownlist.

The ViewModel

var viewModel = {
availableCountries : ko.observableArray([‘France’, ‘Germany’, ‘Spain’])
};

The HTML

<select data-bind=”options: availableCountries” size=”5″ multiple=”true”></select>

The Output

It will display dropdownlist with items.

The selectedOptions binding:
It controls the selected item in dropdownlist.

The ViewModel

var viewModel = {
availableCountries : ko.observableArray([‘France’, ‘Germany’, ‘Spain’]),
chosenCountries : ko.observableArray([‘Germany’])
};

The HTML

<select data-bind=”options: availableCountries, selectedOptions: chosenCountries” size=”5″ multiple=”true”></select>

The Output

It will display dropdownlist with selected item “Germany”.

The uniqueName binding:
It sets the name attribute of associated element to some unique string value if this element doesn’t have name attribute.

3. Control flow bindings

The foreach binding:
It duplicates a section for each entry in an array.
The ViewModel

var viewModel = {
people: [
{ firstName: ‘Bert’, lastName: ‘Bertington’ },
{ firstName: ‘Charles’, lastName: ‘Charlesforth’ },
{ firstName: ‘Denise’, lastName: ‘Dentiste’ }
]
};

The HTML

<table>
<thead>
<tr>
<th>First name</th><th>Last name</th>
</tr>
</thead>
<tbody data-bind=”foreach: people”>
<tr>
<td data-bind=”text: firstName”></td>
<td data-bind=”text: lastName”></td>
</tr>
</tbody>
</table>

The Output

First name        Last name
Bert                 Bertington
Charles            Charlesforth
Denise             Dentiste

The if binding:
It causes a section to appear if a specified expression evaluates to true.

The ViewModel

var viewModel = {
displayMessage : true
};

The HTML

<div data-bind=”if: displayMessage”>
Here is a message.
</div>

The Output

It shows message “Here is a message” as the viewmodel property displayMessage is true.

The ifnot binding:
It is invert of if binding.

The ViewModel

var viewModel = {
displayMessage : true
};

The HTML

<div data-bind=”ifnot: !displayMessage”>
Here is a message.
</div>

The Output

It will show message “Here is a message” as the viewmodel property displayMessage is true.

The with binding:
It  creates a new binding context, so that descendant elements are bound in the context of a specified object.

The ViewModel

var viewModel = {
person: {
firstName: “Rakesh”, lastName: “Nayak”
}
};

The HTML

</div> <p data-bind=”with: person”>
First Name: <span data-bind=”text: firstName”></span>,
Last Name: <span data-bind=”text: lastName”>
</span> </p>

The Output

First Name: Rakesh, Last Name: Nayak

Summary:
In this blog, I explained all built in bindings in knockout.

Written By: Rakesh Nayak, ASP.Net Developer, Mindfire Solutions

Advertisements

Posted on August 27, 2013, in ASP.Net, Javascript, Knockout.js and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: