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">
    <% _.each(items, function(item, itemName) { %>
        <div class="<% if(item.active) { %>active<% } else { %>inactive<% } %>"><%= itemName %>: <% if(item.active) { %> Active <% } else { %> Inactive <% } %></div>
    <% }) %>
</script>

<div>
    <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>
    <input type="button" value="Activate" id="activate">
</div>
<div id="output"></div>

CSS

div { 
    margin-left: 5px;
    margin-top: 10px;
    font-family: Arial;    
}

.inactive {
    color: #94becc;    
}

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 shouldDeActivate = _.difference(
            _.filter(info, function(val, key) {
                return val.active;
            })
        ,items);
    
        // iterate over what we should deactivate and set the bool flag
        _.each(shouldDeActivate, function(itemName) {
            info[itemName].active = false;
        });
    
        _.each(items, function(item) {
            if(!info[item].active)
                info[item].active = true;
        });
    },
    displayChange = function() {
        activateGroup($("#group").val());
   ...