JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<span data-bind="text: name"></span>

<ul data-bind="foreach: portfolioGroups">
    <li data-bind="click: function(){ $root.makeActive($data); }, 
                   text: name">
                       <ul><li>wtf</li></ul>
                   </li>
</ul>

<p>
    <strong>Active Portfolio Group:</strong>
    <span data-bind="text: activePortfolioGroup().name"></span>
</p>

<p>
    <strong>Active Portfolio:</strong>
    <span ></span>
</p>

JavaScript

// variables
var category,
    group,
    portfolio,
    i,
    ii;

// portfolioCategory
function portfolioCategoryViewModel(name){
    var self = this;
    self.name = name;
    self.portfolioGroups = ko.observableArray([]);
    self.activePortfolioGroup = ko.observable();
    
    self.makeActive = function (viewModel){
        self.activePortfolioGroup(viewModel);
    }
}

// portfolioGroup
function portfolioGroupViewModel(name){
    var self = this;
    self.name = name;
    self.portfolios = ko.observableArray([]);
    self.activePortfolio = ko.observable();
    
    self.makeActive = function (viewModel){
        self.activePortfolio(viewModel);
    }
}

// portfolio
function portfolioViewModel(name){
    var self = this;
    self.name = name;
}

// now let's add a category
category = new portfolioCategoryViewModel('Category 1');

// and add some groups
for(i = 0; i < 10; i++){
    group = new portfolioGroupViewModel('Group ' + parseInt(i + 1));
        
    // and add some portfolios and junk
    for(ii = 0; ii < 10; ii++){
        portfolio = new portfolioViewModel('Portfolio ' + parseInt(ii + 1));
        group.portfolios.push(portfolio);
    }
    category.portfolioGroups.push(group);
}

// make first group active
category.activePortfolioGroup(category.portfolioGroups()[0]);

// Activates knockout.js
ko.applyBindings(category);