JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script type="text/html" id="stuff">
    <ul>
        <% _.each(items, function(item, itemName) { %>
            <li><%= itemName %>: <% if(item.active) { %> Active <% } else { %> Inactive <% } %></li>
        <% }) %>
    </ul>
</script>

<div>
    <input type="button" value="Activate" id="activate">
    <select id="group">
        <option value="group1">Group 1</option>
        <option value="group2">Group 2</option>
        <option value="group3">Group 3</option>
        <option value="group4">Group 4</option>
        <option value="group5">Group 5</option>
    </select>
</div>
<div id="output"></div>

CSS

textarea {
    width: 578px;
    height: 385px;
    font-size: 12px; 
    font-family: monospace;
}

JavaScript

var info = {
        item1: {
            isRemote: false,
            active: false /* all kinds of other information for item1, etc. */
        },
        item2: {
            isRemote: false,
            active: false /* all kinds of other information for item2, etc. */
        },
        item3: {
            isRemote: false,
            active: false /* all kinds of other information for item3, etc. */
        },
        item4: {
            isRemote: false,
            active: false /* all kinds of other information for item4, etc. */
        },
        item5: {
            isRemote: false,
            active: false /* all kinds of other information for item5, etc. */
        },
        item6: {
            isRemote: false,
            active: false /* all kinds of other information for item6, etc. */
        },
        item7: {
            isRemote: false,
            active: false /* all kinds of other information for item7, etc. */
        }
    },
    groups = {
        group1: ["item1", "item2", "item4"],
        group2: ["item1", "item2", "item7"],
        group3: ["item1", "item3", "item4", "item6"],
        group4: ["item2", "item3", "item5"],
        group5: ["item2", "item3", "item4"],
    },
    activateGroup = function(groupName) {
        // get the items for this group
        var items = groups[groupName];
        // find out which items are active that aren't in the group we're activating
        var shouldHide = _.reduce(info, function(memo, val, key) {
            if (val.active && !_.include(items, key)) {
                memo.push(key);
            }
            return memo;
        }, []);
    
        // iterate over what we should deactivate and set the bool flag
        _.each(shouldHide, function(itemName) {
            info[itemName].active = false;
        });
    
        _.each(_.difference(items, shouldHide), function(item) {
            info[item].active = true;
        });
};

$("#activate").click(function() {
   ...