JSFiddle - React, Tailwind, and code Playground

by DJ Grossman

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-debug.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.tooltip.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.tab.js"></script>
<div class="row">
	<div class="small-12 columns" data-bind="template: { name: 'theTemplate', data: { tabsToRender: $root.tabs } }"></div>
</div>

<script type="text/html" id="theTemplate">
	<dl class="tabs" data-tab data-bind="foreach: tabsToRender, foundationReflow: true">
		<!-- this is a comment -->
		<dd>
			<a data-tooltip data-bind="text: $data.tabName, attr: { href: '#' + $data.tabName, title: $data.tabName }"></a>
		</dd>
	</dl>
	<div class="tabs-content" data-bind="foreach: tabsToRender">
		<div class="content" data-bind="attr: { id: $data.tabName }">
			<span>This is the tab's content. The tab's name is <i data-bind="text: $data.tabName"></i>.</span>
			<span>Click <a data-bind="click: function() { $root.addTabs($data); return false; }">here</a> to add child tabs.</span>
			<div data-bind="template: { name: 'theTemplate', data: { tabsToRender: $data.tabChildren } }"></div>
		</div>
	</div>
</script>

JavaScript

ko.bindingHandlers.foundationReflow = {
	init: function (element, valueAccessor) {
		var value = ko.unwrap(valueAccessor());
		if (value)
			$(document).foundation('reflow');
	}
};

function ViewModel() {
	var self = this;

	self.tabIndex = 1;

    self.createTab = function () {
		return {
			tabName: 'Tab' + self.tabIndex++,
			tabChildren: ko.observableArray([])
		};
	};

	self.tabs = ko.observableArray([self.createTab(), self.createTab()]);
	self.addTabs = function (parentTab) {
		parentTab.tabChildren.push(self.createTab());
		parentTab.tabChildren.push(self.createTab());
	}
}

ko.applyBindings(new ViewModel());