JSFiddle - React, Tailwind, and code Playground

by darknessm0404

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<h2>Pour chaque évééééénement</h2>
<div data-bind="template: { 
    foreach: visualEvents,
    name: templateName, 
    afterRender: myAfterRender,
    beforeRemove: myBeforeRemove
}">
</div>
 
<script type="text/html" id="eventTemplate">
    <div>
        <h3 data-bind="text: name"></h3>
        <p>Date: <span data-bind="text: date"></span></p>
    </div>
</script>
<script type="text/html" id="eventTemplate2">
    <div>
        <h1>It's template 2!!</h1>
        <p data-bind="text: name"></p>
        <p>Credits: <span data-bind="text: date"></span></p>
    </div>
</script>
 
<button type="button" data-bind="click:templateSwitch">Change live template</button>
<button type="button" data-bind="click:deleteFirst">Delete first</button>

JavaScript

function MyViewModel() {
     var self = this;
     this.visualEvents = ko.observableArray([
         { name: 'vEvent1', date: '01-01' },
         { name: 'vEvent2', date: '02-02' }
     ]);
     
     function getFromElements(elements) {
         var i;
         for(i=0;i<elements.length;i++) {
             if(elements[i].nodeType === 1) {
                 return $(elements[i]);
             }
         }
         return undefined;
     }
     this.myAfterRender = function(elements){
         var el = getFromElements(elements);
         if(el) {
             el.attr('data-is-base-element', 'true');
             console.log('element added', el);
         }
     };
     this.myBeforeRemove = function(elements) {
         // Sera appelé pour chaque élément du template, donc on centralise pour savoir quel est le "vrai" élément à considérer dans la suppression
         var $element = $(arguments[0]);
         debugger;
         if($element.attr('data-is-base-element')==='true') {
             console.log('deleting base element', $element);
         }
         // Supprimer les nodes manuellement (knockout ne le fait pas lorsque beforeRemove est précisé)
         $element.remove();
     }
     this.templateValue  = ko.observable('eventTemplate');
     this.templateName = function(collectionElement, bindingContext){
         return self.templateValue();
     }
     this.templateSwitch = function(){
         this.templateValue('eventTemplate'+(this.templateValue()==='eventTemplate'?'2':''));
     }
     this.deleteFirst = function(){
         self.visualEvents.pop();
     }
 }
 ko.applyBindings(new MyViewModel());