JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/gh-pages-1.3.0/js/knockout-1.3.0rc.js"></script>

Nombre d'éléments: <span data-bind="text: items().length"></span><br/><br/>

<div data-bind="foreach: donnees()">
    <span data-bind="visible: open()">-</span><span data-bind="visible: !open()">+</span>
    <span data-bind="text: texte, click: function(){open(!open())}"></span><br/>
    <div data-bind="visible: open, foreach: subitems">        
        &nbsp;&nbsp;
        <span data-bind="visible: open()">-</span><span data-bind="visible: !open()">+</span>                
        <span data-bind="text: texte, click: function(){open(!open())}"></span><br/>
        <div data-bind="visible: open, foreach: subitems">
            &nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="text: texte"></span><br/>
        </div>
    </div>
</div>

CSS

body{
    font-family: sans-serif;
}

JavaScript

var viewModelParent= function() { 
     var self = this;
     this.items = ko.observableArray([]); 

     this.donnees = ko.dependentObservable(function(){
         var bla = [];
         
         ko.utils.arrayForEach(self.items(), function(itm){
             
            var grp = ko.utils.arrayFirst(bla, function(itmg){
                return itm.groupe() == itmg.texte();
            });

            if (grp == null)
            {
                   grp = new DisplayItem(true, itm.groupe(), 2);
                   bla.push(grp);
            }             
                 
            var sgrp =  ko.utils.arrayFirst(grp.subitems(), function(itmg){
                return itm.sousGroupe() == itmg.texte();
            });
             
            if (sgrp == null)
            {
                   sgrp = new DisplayItem(true, itm.sousGroupe(), 1);
                   grp.subitems().push(sgrp);
            }
            
             sgrp.subitems().push({texte: itm.texte, level: 0});
             
         });        
 
         return bla;
     });
    
} 
 
var ChildItem= function(groupe, sousGroupe, texte) { 
     var self = this;     
     this.texte= ko.observable(texte);
     this.groupe = ko.observable(groupe);
     this.sousGroupe = ko.observable(sousGroupe);
}
     
var DisplayItem= function(open, texte, level) {
     this.texte = ko.observable(texte);
     this.open  = ko.observable(open);
     this.level = ko.observable(level);
     this.subitems = ko.observableArray([]);
}
    
var MyViewModel = new viewModelParent();         

MyViewModel.items.push(new ChildItem("Groupe1","sousGroupe1","blabla"));
MyViewModel.items.push(new ChildItem("Groupe1","sousGroupe1","blabla2"));
MyViewModel.items.push(new ChildItem("Groupe1","sousGroupe2","blabla"));
MyViewModel.items.push(new ChildItem("Groupe1","sousGroupe2","blabla2"));
MyViewModel.items.push(new ChildItem("Groupe2","sousGroupe1","blabla"));
MyViewModel.items.push(new...