JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
<span data-bind="delayInit : zxcCountDown  , pId : 'TIMER_'+id() , pMessage : 'Hello' , pSecond : 3 , attr:{ 'id' : 'TIMER_'+id()} , text : 'DEMO'"></span>

JavaScript

var viewModel = {
    id : ko.observable(5) ,
    zxcCountDown : function(id, mess, secs, mins, hrs, days) {
         alert("MESSAGE : "+ mess+ "/ ID : "+id  + "/ SECOND : " + secs);
         alert("My item value :" + document.getElementById(id).textContent);
    }
}
    
ko.bindingHandlers.delayInit = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor() || {};
        if(allBindings) {             
             setTimeout( function() {               
                valueAccessor()(allBindings.pId,allBindings.pMessage, allBindings.pSecond);
             } , 0);        
        }
    }
};
    
ko.applyBindings(viewModel);