JSFiddle - React, Tailwind, and code Playground

by mikebridge

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <ul data-bind="foreach: Comments">
        <li data-bind="attr: { id: Id }" class="Comment">
           <div data-bind="needsPrettification: DateCreated, text: DateCreated"></div>

        </li>
    </ul>
<button data-bind="click: addItem">Add</button>

CSS

.prettyDate{ color : pink };

.prettyDateBg{ color : black};

JavaScript

(function( $ ){
  $.fn.prettify= function() {          
      return $(this).css("background-color", "pink");
  };
   
})( jQuery );

ko.bindingHandlers.needsPrettification= {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).prettify();
    }
}
viewModel = { "Comments" : ko.observableArray([
    {"Comment" : "My Comment", "Id": "1", "DateCreated": ko.observable("12-01-2012")},
     {"Comment" : "My Comment 2", "Id": "2", "DateCreated":  ko.observable("12-02-2012")}]),
   
    "addItem": function() {
        this.Comments.push({"Comment" : "My Comment X", "Id": "2", "DateCreated":  ko.observable("12-03-2012")});
    }
    
};


$(function(){
    $(".prettyDate").prettify();
});

ko.applyBindings(viewModel );