JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<h1>Notifications</h1>
<br>
<table>
<tbody data-bind="template:{name: getTemplateName, foreach:items}">
</tbody>
</table>


<!-- Template -->
<script type="text/html" id="urlTemplate">
    <tr>
        <td><a data-bind="attr: { href: Url}, text: Message"></a></td>
    </tr>
</script>

<!-- Template -->
<script type="text/html" id="noUrlTemplate">
    <tr>
        <td data-bind="text: Message"></td>
    </tr>
</script>

JavaScript

function Notification(url, message) {
    var self = this;
    self.Url = ko.observable(url);
    self.Message = ko.observable(message);
}

function ViewModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.items.push(new Notification("http://www.google.com", "Meta lograda"));
    self.items.push(new Notification("", "Mensaje sin ningun link"));
    self.items.push(new Notification("http://www.google.com", "Ganaste 100 puntos"));

    self.getTemplateName = function(notification) {
        if (notification.Url().length == 0) return "noUrlTemplate";
        return "urlTemplate";
    };

}


ko.applyBindings(new ViewModel());;