Click here to Skip to main content
13,553,830 members
Click here to Skip to main content
Add your own
alternative version


36 bookmarked
Posted 14 Dec 2012
Licenced CPOL

Binding Metro UI Tiles with Knockout.js

, 10 Jan 2013
Rate this:
Please Sign up or sign in to vote.
How to build Metro UI Tiles in Knockout.js

View Live Demo


Knockout is a JavaScript library which dynamically binds data between different HTML contents and follows the Model-View-View-Model (MVVM) design pattern. One of its core features is Observable, which can detect changes in the view model and updates the model according to that change. It’s a special JavaScript object that can detect dependencies among controls automatically. In this article, we will mostly use observable to bind controls and update data dynamically.


Consider a metro tile where each tile has a title and description. It has a background color as well. There can be multiple tiles of the same type. Our target is to create tiles dynamically and with every tile, there would be an edit panel where user can edit its title, description and background color. If you are confused about this scenario, then I recommend you to view demo first.


One of the main features of Knockout is, it can track each element of UI and can update automatically. We will use this feature to bind our metro tiles with its edit panel and when user will change in edit panel, tiles of that panel will change automatically. Knockout will track edit panel with its correspondent tile. For this, first we have to take a JavaScript object where all the property of a metro tile is defined. Here, we have title, description and color as an observable. This observable will detect dependencies between each tile and its edit panel and it will keep each tile object updated automatically. Here is a how Tile object looks:

var Tile = function (title, description, color) {
     var self = this;
     self.title = ko.observable(title);
     self.description = ko.observable(description);
     self.tileColor = ko.observable(color);
     self.editPanel = ko.observable(false);
     self.expandEdit = function () {
     self.collapseEdit = function () {

Another additional observable is taken named editPanel which will detect visibility of its tile’s edit panel. expandEdit and collapseEdit will make editPanel true or false on click event. Here, ObservableArray is taken to store all tiles. addTile and removeTile functions will add new tile on the view and remove tile will delete its corresponding tile from the view and from the observableArray as well.

var TileModel = function () {
     var self = this;
     self.lines = ko.observableArray([
           new Tile("Batman", "The Dark Night Rises", "#525252"),
           new Tile("Transformer", "Revenge of the Fallen", "#DA532C")
     self.addTile = function () {
          self.lines.push(new Tile("Title", "Description", RandomColor()))
     self.removeTile = function (line) { 
          self.lines.remove(line) };

ko.applyBindings(new TileModel());   

Also, two tiles are pushed into the array on load and observable will bind them with the HTML control automatically. Then, finally we’ve binded the full model with Knockout with ko.applyBindings().

Now let’s take a look at HTML controls which are binded with observable object:

<a id="aCreate" class="btn-add-tile" data-bind='click: addTile'>Add Tile</a>
<div class="tile-container" data-bind='foreach: lines'>
     <div class="tile-area">
          <div class="tile-elem" data-bind="style: { background: tileColor }">
               <p class="tile-description" data-bind="text: description"></p>
          <span class="tile-title" data-bind="text: title" style=""></span>
          <div class="bottom-bar">
               <span class="arrow" data-bind='click: expandEdit, ifnot:editPanel'>
                    <img src="Styles/images/MetroDown.png" alt="Open edit panel" /></span>
               <span class="arrow" data-bind='click: collapseEdit, if:editPanel'>
                    <img src="Styles/images/MetroUp.png" alt="Close edit panel" /></span>
               <span class="close-btn" data-bind='click: $parent.removeTile'>
                    <img src="Styles/images/MetroClose.png" alt="Remove tile" /></span>
          <div data-bind="if: editPanel">
               <div class="edit-panel">
                    <input class="text-title" data-bind="value: title, 
                    valueUpdate: 'afterkeydown'" maxlength="12" />
                    <textarea class="txtdesc" rows="2" 

                    data-bind="value: description, 
                    valueUpdate: 'afterkeydown'"></textarea>

Here, Knockout will search for data-bind attribute to bind data with its model. Now, on clicking Add Tile button, we are calling addTile function from TileModel which adds a new object to lines. With foreach, Knockout is generating all the tile objects stored in lines with a loop. Every time a tile is added or removed, it tracks the changes in the model and binds tiles dynamically. Now edit panel’s <textarea> is binded with <p> of tile element with description object. <p> is updated when <textarea> has an input character. We are updating the description object after key down. Title will update in the same way like description. So the main thing is all the observables track dependencies among the HTML controls and it updates automatically.

Why Knockout?

In situations like this, where we have to bind data dynamically and need to track all the dependencies among controls, then Knockout is the best choice. We will bind observable with UI controls and observable will notify about changes and it will update automatically. Another good feature is, it can update data very frequently, like when we bind afterkeydown method, observable detects change and updates the correspondent element at that moment.

Run Source Code

Download the zip file, extract it, open KnockoutTiles.sln file and hit F5. It’s an ASP.NET web project written in Visual Studio 2012 and used knockout.js version 2.2.0.


Knockout follows the MVVM pattern where observable tracks dependencies between model and view model and updates view automatically. This article gives a very basic idea about observable. I recommend you download the source file and see for yourself how it actually works.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sk. Tajbir
Software Developer (Senior) Desme
Bangladesh Bangladesh
I've started working on C#.Net WinForm in 2011 and developed a desktop application named NoseOp for Microsoft Imagine Cup 2011 and my team scored one of the top 6 teams of Bangladesh. NoseOp is an application for physically disable person to operate computer easily and do everyday work. Later on I scored 1st in software exhibition of American International University - Bangladesh's(AIUB) Software Engineering day.

After that I've started working on Asp.Net and developed several websites which are running successfully in different countries. I'm very much interested and passionate about learning new technologies.

My Projects:

CodeProject Achievement:

  • 2nd in Best Web Dev article of December 2012
  • 7th in Best overall article of April 2013
  • 3rd in Best Web Dev article of April 2013

You may also be interested in...

Comments and Discussions

Generalkeep going.. Pin
Monjurul Habib14-Dec-12 20:45
memberMonjurul Habib14-Dec-12 20:45 
GeneralRe: keep going.. Pin
Sk. Tajbir14-Dec-12 20:50
memberSk. Tajbir14-Dec-12 20:50 
GeneralMy 5 Pin
Shahriar Iqbal Chowdhury14-Dec-12 3:45
memberShahriar Iqbal Chowdhury14-Dec-12 3:45 
GeneralRe: My 5 Pin
Sk. Tajbir14-Dec-12 3:47
memberSk. Tajbir14-Dec-12 3:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180515.1 | Last Updated 10 Jan 2013
Article Copyright 2012 by Sk. Tajbir
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid