Click here to Skip to main content
12,889,951 members (43,878 online)
Click here to Skip to main content

Stats

21K views
746 downloads
36 bookmarked
Posted 14 Dec 2012

Binding Metro UI Tiles with Knockout.js

, 10 Jan 2013 CPOL
How to build Metro UI Tiles in Knockout.js
<%@ 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


You may also be interested in...

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