Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Binding Metro UI Tiles with Knockout.js

, 10 Jan 2013
Knockout is a JavaScript library which dynamically binds data between different html contents and follow Model-View-View-Model (MVVM) design pattern.  It’s one of the core feature is Observable, which can detect changes in the view model....
bindingmetrouitileswithknockout-v1.00-noexe.zip
KnockoutjsMetroTile
KnockoutjsMetroTile.csproj.user
obj
Debug
Properties
Scripts
Styles
images
MetroClose.png
MetroDown.png
MetroUp.png
bindingmetrouitileswithknockout-v1.00.zip
bin
KnockoutjsMetroTile.dll
KnockoutjsMetroTile.csproj.user
KnockoutjsMetroTile.dll
MetroClose.png
MetroDown.png
MetroUp.png
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="KnockoutjsMetroTile._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        var colorCount = -1;
        $(document).ready(function () {
            BindViewModel();
        });

        function BindViewModel() {
            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.editPanel(true);
                };
                self.collapseEdit = function () {
                    self.editPanel(false);
                };
            };
            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());
        }
        function RandomColor() {
            colorCount++;
            if (colorCount == 0)
                return "#00A300";
            else if (colorCount == 1)
                return "#603CBA";
            else if (colorCount == 2)
                return "#B91D47";
            else if (colorCount == 3)
                return "#FFC40D";
            else if (colorCount == 4)
                return "#2B5797";
            else {
                colorCount = -1;
                return "#99B433"
            }
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <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>
            </div>
            <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>
            <div data-bind="if: editPanel">
                <div class="edit-panel">
                    <label>Title:</label>
                    <input class="text-title" data-bind="value: title, valueUpdate: 'afterkeydown'" maxlength="12" />
                    <label>Description:</label>
                    <textarea class="txtdesc" rows="2" data-bind="value: description, valueUpdate: 'afterkeydown'"></textarea>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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

Share

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.
 
www.sktajbir.com
 
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
Follow on   Twitter   LinkedIn

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 10 Jan 2013
Article Copyright 2012 by Sk. Tajbir
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid