JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<table>
    <thead>
        <tr>
            <th>ProfileId</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Rating</th>
            <th>SRC Value</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:FavoriteProfiles">
        <tr>
            <td data-bind="text:ProfileId"></td>
            <td data-bind="text:Age"></td>
            <td data-bind="text:Gender"></td>
            <td data-bind="attr:{src: RatingExtended()}"></td>
            <td data-bind="text:RatingExtended()"></td>
        </tr>
    </tbody>
</table>

CSS

table thead {
    background-color:black;
    color:white
}
table tbody {
    background-color:gray;
    color:white
}

JavaScript

var MyModule = (function () {

    var FavoriteProfiles = ko.observableArray([]);
    //Call initialize method from .ready
    function init() {

        loadFavorite();
        ko.applyBindings(this);
    }

    function loadFavorite() {
        var ajaxdata = DummyAjaxCall(); //get all profiles

        $.each(ajaxdata, function (index, value) {
            FavoriteProfiles.push(new FavoriteViewModel(value)); //Create a Model
        });
        console.log(FavoriteProfiles()); //View it

    }

    // explicitly return public methods when this object is instantiated
    return {
        Init: init,

        FavoriteProfiles: FavoriteProfiles
    };

})(window);

//  example usage
MyModule.Init(); // Call the INIT method for mymodule
function FavoriteViewModel(data) {
    var self = this

    self.ProfileId = data.ProfileId;
    self.Age = data.Age;
    self.Gender = data.Gender;
    self.Rating = data.Rating;
    self.RatingExtended = ko.computed(function() {
        return data.Rating + " rating.png";
    }, this);

}

function DummyAjaxCall() {
    //Sample Data
    var multipleData = [];
    var ajaxData = {};
    ajaxData.ProfileId = 20;
    ajaxData.Age = 21;
    ajaxData.Gender = "F";
    ajaxData.Rating = 4;
    multipleData.push(ajaxData);


    var ajaxData2 = {};
    ajaxData2.ProfileId = 200;
    ajaxData2.Age = 211;
    ajaxData2.Gender = "M";
    ajaxData2.Rating = 1;
    multipleData.push(ajaxData2);

    return multipleData;
}