JSFiddle - React, Tailwind, and code Playground

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>Rating Text
            </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: $root.getRating($data)}">
                <img   />
            </td>
            <td data-bind="text:$data.Rating +'rating.png'">
            </td>
        </tr>
    </tbody>
</table>

CSS

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

JavaScript

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;
}
ko.applyBindings(new FavoriteViewModel());

function FavoriteViewModel() {
    var self = this

    self.FavoriteProfiles = ko.observableArray([])

    self.getRating = function (item) {
        alert('333');
        //here i want conditions and concat image path
        var computed= (item.Rating+"rating.png");
        //console.log(item);
        return computed;
      }

    self.LoadData = function () {
        //run ajax and put its result in self.FavoriteProfiles
        self.FavoriteProfiles(DummyAjaxCall())
    }

    self.LoadData()
}