JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<ul data-bind="foreach: currentLinks, visible: current()" >
    <li data-bind="text: $data"></li>
</ul>
<button type="button" data-bind="click: toggleCurrentBoard">Toggle</button>

JavaScript

var boardViewModel = {
    links: ko.observableArray(["link 1", "link 2", "link 3", "link 4"])
};

var ViewModel = function () {
    var self = this;
    self.current = ko.observable(null);
    self.currentLinks = ko.computed(function () {
        if (self.current()) {
            return self.current().links();
        }
        
        return [];
    });
    self.toggleCurrentBoard = function () {
        if (self.current()) {
            self.current(null);
        } else {
            self.current(boardViewModel);
        }
    };
};

ko.applyBindings(new ViewModel());