JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<div data-bind="template: { name: 'habit-template', foreach: habits}"></div>

<script type="text/html" id="habit-template">
    <div class="habit">
    <h2 data-bind="text: name"></h2>
    <span>Nivel: </span><span class="level" data-bind="text: levelDisplay().description, style: { color: levelDisplay().color}"></span>
    <button data-bind="click: choose">Seleccionar</button>
    </div>
</script>

CSS

.habit{
padding: 5px;
}
button{
float:right;
}
.level{
margin-left: 10px;
}

JavaScript

var ViewModel = function() {
    var self = this;
    self.habits = ko.observableArray([]);
};
var Habit = function(name, level) {
    var self = this;
    self.name = name;
    self.level = ko.observable(level);
    self.levelDisplay = ko.computed(function() {
        if (self.level() > 70) {
            return {
                description: "Excelente",
                color: "green"
            };
        }
        else {
            return {
                description: "Deficiente",
                color: "red"
            };

        }
    }, this);

    self.choose = function() {
        alert("Aun no se bien que pasa aqui");
    };
};
var vm = new ViewModel();
//Esto vendria con un ajax call que devuelva un json con la data especifica del usuario.
ko.applyBindings(vm);
vm.habits.push(new Habit("Consumo de Vegetales", 90));
vm.habits.push(new Habit("Consumo de Algo", 25));
vm.habits.push(new Habit("Consumo de Otra cosa", 23));
vm.habits.push(new Habit("Consumo de Frutas", 87));
vm.habits.push(new Habit("Consumo de Legumbres", 93));