reidev275 · August 29, 2015 14:08
diff --git a/AnimatedHierarchy.html b/AnimatedHierarchy.html
 <!DOCTYPE html>

 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Animated Hierarchy</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>Hierarchy <small>Animated traversing through a hierarchy</small></h1>
            </div>


            <ol class="breadcrumb">
                <li><a data-bind="click: goHome">Home</a></li>
                <!-- ko foreach: selections -->
                <li><a data-bind="text: name, click: $root.selectItem"></a></li>
                <!-- /ko -->
            </ol>

            <div data-bind="foreach: { data: options, afterAdd: showOption }">
                <a class="btn btn-default" data-bind="text: name, click: $root.selectItem"></a>
            </div>

            <div data-bind="if: selections.length > 0">
                <a class="btn btn-default" data-bind="click: goUp">Go Up</a>
            </div>


        </div>

        <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>

        <script>
            var vm = function () {
                var me = this,
                    items = [
                        { name: 'Honda',
                            children: [
                                { name: 'Accord' }, 
                                { name: 'Civic' }, 
                                { name: 'Odyssey', children: [
                                    { name: 'LX'}, 
                                    { name: 'EX'}, 
                                    { name: 'EX-L'}, 
                                    { name: 'Touring'}]}]},
                        { name: 'Toyota',
                            children: [
                                { name: 'Sienna' }, 
                                { name: 'Camry' }, 
                                { name: 'Tercel' }]}];

                me.options = ko.observableArray();
                me.selections = ko.observableArray();

                me.selectItem = function (item) {
                    cleanSelections(item.name);
                    me.selections.push(item);
                    me.options(item.children || [])
                };

                var cleanSelections = function (name) {
                    if (me.selections().filter(function (x) { return x.name == name }).length > 0) {
                        me.selections().pop();
                        cleanSelections(name);
                    }
                }

                me.goHome = function () {
                    me.selections([]);
                    me.options(items);
                };

                me.showOption = function (elem) {
                    if (elem.nodeType === 1) $(elem).hide().fadeIn();
                };

                me.goHome();
            };
            ko.applyBindings(new vm());
        </script>
    </body>    
 </html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Animated Hierarchy</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container">
	<div class="page-header">
	<h1>Hierarchy <small>Animated traversing through a hierarchy</small></h1>
	</div>


	<ol class="breadcrumb">
	<li><a data-bind="click: goHome">Home</a></li>
	<!-- ko foreach: selections -->
	<li><a data-bind="text: name, click: $root.selectItem"></a></li>
	<!-- /ko -->
	</ol>

	<div data-bind="foreach: { data: options, afterAdd: showOption }">
	<a class="btn btn-default" data-bind="text: name, click: $root.selectItem"></a>
	</div>

	<div data-bind="if: selections.length > 0">
	<a class="btn btn-default" data-bind="click: goUp">Go Up</a>
	</div>


	</div>

	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>

	<script>
	var vm = function () {
	var me = this,
	items = [
	{ name: 'Honda',
	children: [
	{ name: 'Accord' },
	{ name: 'Civic' },
	{ name: 'Odyssey', children: [
	{ name: 'LX'},
	{ name: 'EX'},
	{ name: 'EX-L'},
	{ name: 'Touring'}]}]},
	{ name: 'Toyota',
	children: [
	{ name: 'Sienna' },
	{ name: 'Camry' },
	{ name: 'Tercel' }]}];

	me.options = ko.observableArray();
	me.selections = ko.observableArray();

	me.selectItem = function (item) {
	cleanSelections(item.name);
	me.selections.push(item);
	me.options(item.children \|\| [])
	};

	var cleanSelections = function (name) {
	if (me.selections().filter(function (x) { return x.name == name }).length > 0) {
	me.selections().pop();
	cleanSelections(name);
	}
	}

	me.goHome = function () {
	me.selections([]);
	me.options(items);
	};

	me.showOption = function (elem) {
	if (elem.nodeType === 1) $(elem).hide().fadeIn();
	};

	me.goHome();
	};
	ko.applyBindings(new vm());
	</script>
	</body>
	</html>