JSFiddle - React, Tailwind, and code Playground

by etiennenoel

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <input type="hidden" name="exercisesJSON" id="exercisesJSON" value='[
{ "title" : "Pointe des pieds",
"imgSrc" : "img/"
},
{ "title" : "Passement de jambe extérieur du pied",
"imgSrc" : "img/"
},
{ "title" : "Slalom entre les cônes",
"imgSrc" : "img/"
},
{ "title" : "Dribble",
"imgSrc" : "img/"
},
{ "title" : "À quoi servent les jongleries ?",
"imgSrc" : "img/"
},
{ "title" : "Ramène-pousse",
"imgSrc" : "img/"
},
{ "title" : "Intérieur-Intérieur",
"imgSrc" : "img/"
},
{ "title" : "Saut sur la plante des pieds",
"imgSrc" : "img/"
},
{ "title" : "Saut sur la plante des pieds",
"imgSrc" : "img/"
}
]' />

<div data-bind="html: results">
    
</div>

JavaScript

function exercisesViewModel() {
    var self = this;
    
    self.exercises = JSON.parse($('#exercisesJSON').val())
    
    self.exercisesToShow = self.exercises;
        
    self.results = ko.computed(function() {
        var result = '<div class="row-fluid">';
        
        var numberOfColumns = 4;
        
        var j = 0;
        for(var i = 0; i < self.exercisesToShow.length; i++) {
            
            if( j == numberOfColumns) {
                j = 0
                result += '</div><div class="row-fluid">';
            }
           
            var styleClass = "whiteExerciseThumbnail"
            if( i % 8  == 0 || i % 8 == 2 || i % 8 == 5 || i % 8 == 7) {
                styleClass = "blueExerciseThumbnail"
            }
            
            result += '<div class="span3 exerciseThumbnail '+ styleClass +'">';
            result += '<img src="'+ self.exercisesToShow[i].imgSrc +'" />';
            result += '<p class="exerciseThumbnailHeader">'+ self.exercisesToShow[i]['title'] +'</p>';
            result += '</div>';
                
            j++;
        }
        
        result += "</div>";
        
        return result;
        
        
    }, this);
    
       
}

var exercisesVM = new exercisesViewModel();

ko.applyBindings(exercisesVM);