JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="icons">
    
</div>

CSS

#icons {
    width: 430px
}
i {
    display: inline-block;
    width: 41px;
    height: 41px;
    background-image: url(http://glyphicons.com/wp-content/themes/glyphicons/images/glyphicons.png);
    
    margin: 1px;
}
i.clicked {
    background-color: #49B60C;
}
i:hover {
    background-color: orange;
}

JavaScript

var viewModel = function () {
    var self = this;
    self.rows = 40;
    self.cols = 10;
    self.size = 29;
    self.gutter = 18;
    self.onClick = function(e) {
        $(e.target).toggleClass('clicked');
    }
    
}

vm = new viewModel;    
var str = '';
    
    for (var j = 0; j<vm.rows; j++) {
        for (var i = 0; i<vm.cols; i++) {
            str += '<i ' +
                'style="background-position: ' + (-i*48+5) + 'px ' + (-j*48+7) + 'px" ' +
                ' data-x="' + i + '" data-y="'+ j +'" data-bind="click:onClick"></i>';
        }
    }

$('#icons').append($(str))
/*    .find('i').on('click',
function() {
    var $this = $(this);
    alert('icon' + $this.data('x') + 'x' + $this.data('y'));
});*/
    
ko.applyBindings(vm);