JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="https://raw.github.com/addyosmani/mustache-for-chromeapps/master/mustache.min.js"></script>

JavaScript

var data = {
    name: "Ronny",
    categories: [
        {
            id: 1,
            canBeDeleted: true,
            text: 'One',
            selected: true            
        },
        {
            id: 2,
            canBeDeleted: false,
            text: 'Two'                    
        },
         {
            id: 3,
            canBeDeleted: true,
            text: 'Three'                    
        }       
    ]
};
var template = '<div class="popover-background"></div>\
<div class="popover-window">\
    <div class="popover-anchor"></div>\
    <div class="choose-folder">Choose a folder</div>\
    <ul>\
    {{#categories}}\
    <li data-id="{{id}}" class="icon-folders {{#selected}}selected{{/selected}}">\
            <div class="icon"></div>\
    {{#canBeDeleted}}<div class=\'delete-button\'></div>{{/canBeDeleted}}\
    {{#canBeDeleted}}<div class=\'edit-button\'></div>{{/canBeDeleted}}\
    <div class="text">{{text}}</div>\
    <input class="edit-box" maxlength="100" value="{{text}}"/>\
        </li>\
        {{/categories}}\
    </ul>\
    <input placeholder="New Folder..." class="new-folder" maxlength="100" />\
\
</div>\
';
var html = Mustache.to_html(template, data);
$('body').text(html);