Crowl: een makkelijk te gebruiken HTML-template-engine

Angular.js, React.js... net iets te veel "overkill" voor jouw persoonlijke webapplicatie? Dan biedt Crowl.js misschien wel wat soelaas. Crowl.js is een eenvoudig no-nonsens HTML-template-framework. Met amper 8.6kb code, en de mogelijkheid om je eigen HTML-sjablonen toe te voegen, is Crowl.js een lichtgewicht. 

Opgelet: Het komt niet met alle toeters en bellen van krachtige systemen zoals Anglular, VUE of React... maar dat is ook niet de bedoeling. Bovendien, ik ben maar een eenvoudige webontwikkelaar, zelf ook zonder al te veel toeters en bellen :-)

Crowl.js gebruiken: eenvoudig voorbeeld

Je kan Crowl.js eenvoudig integreren in je eigen webpagina. 

<script src="https://www.schoolvoorbeeld.be/crowl/crowl.template.engine.js"></script>

Nu kan je een Crowl-applicatie aanmaken in je pagina.

<script>
           var myApp = new Crowl;
           myApp.ReadTemplates(function(){
                 //... hier komt jouw code
           }); 
</script>

Nu is het tijd om een eigen sjabloon toe te voegen aan je pagina. Hiervoor voeg je een script-tag toe aan je pagina met als type "text/CrowlTemplate". Geef elk sjabloon een uniek id. In dit geval geven we het sjabloon de id "NieuweKrant". 

<script type="text/CrowlTemplate" id="NieuweKrant"> </script>

In dit voorbeeld houden we het eenvoudig. We maken een sjabloon voor krantenartikels.

<script type="text/CrowlTemplate" id="NieuweKrant">
      <article>
           <h3><%this.krantenkop%></h3>
           <div><%this.inhoud%></div>
     </article> 
</script>

Je kan het sjabloon nu gebruiken en vullen met inhoud.

<script>          
     var myApp = new Crowl;
          myApp.ReadTemplates(function(){
             myApp.template("#NieuweKrant", {
                     id: "DeGazet",
                     krantenkop: "Sinterklaas komt om bij zwaar verkeersongeval",
                     inhoud: "Gisterenavond kwam de Sint onder een vrachtwagen terecht..."
             }, "#krant:append");
          });
</script>

1. Een template-instructie verwacht minimaal 3 parameters:
2. De id van het sjabloon. 
3. Een array met waardes die je in het sjabloon wil weergeven. 
4. Een callback-functie.

Het element in de pagina waarin je het gerenderde sjabloon (aan het "body"-element of een id vb. "#waardekrantmoetkomen") wil plakken. Eventueel gevolgd  door ":append" of ":replace". Bij "replace" wordt de bestaande inhoud van het geselecteerde element vervangen. Bij "append" of "paste" wordt de nieuwe inhoud aan het geselecteerde element toegevoegd. 

We plakken het gerenderde sjabloon in het element met id="krant".

<div id="krant"></div>

Sjabloon in een extern bestand

Het is ook mogelijk om zowel het sjabloon als de weer te geven inhoud in te lezen uit een extern bestand. Je kan het sjabloon bewaren in een extern bestand.

<script type="text/CrowlExternalTemplate" id="NieuweKrant" src="krant.html"></script>

Muismenu

Laad het externe sjabloon:

<script type="text/CrowlExternalTemplate" src="https://www.schoolvoorbeeld.be/crowl/crowl.template.mousemenu.js"></script>

Laad ook het CSS-document:

<link rel="stylesheet" href="https://www.schoolvoorbeeld.be/crowl/crowl.ui.css">

We maken een HTML-element waar we het muismenu gaan aan toekennen.

<div id="muismenu">Klik hier om het te tonen</div>

<script>
var myApp= new Crowl;
myApp.ReadTemplates(function(){
          myApp.template("#CrowlMouseMenu", {
                id: "muis2",
                content: "Dit is de tekst die moet getoond worden",
                wrapper: "#muismenu",
                mouse: "left",
                width:20,
                hide: "click",
                animation: "bounceIn",
                arrow: "MouseArrowTop"
            }, "#muismenu:append");
});
</script>