Shaken, not stirred. A refreshing way to drink JavaScript.
Just a lightweight javascript framework with no future.
Shaken-js can be used through npm CDN service just adding this line to you HTML page.
<script src="https://unpkg.com/shaken-js@1.0.0/shaken.js"></script>
WARNING Following examples have not been really tested, but sould work. Feel free to open issues about them in case of troubles.
- HTML Code
<h2 id="mytitle" class="title item-title is-size-4 has-text-weight-extra-bold" data-name="strDrink"> My Cocktail </h2>
- Javascript Code
new LocalComponent('mytitle').compile({strDrink: "Vesper Martini"});
-
HTML Code
<table class="table"> <thead> <tr> <th>Ingredients</th> <th>Measures</th> </tr> </thead> <tbody id="cocktail-ingredients"> <!-- Content of this tag will be used as a template and repeated looping over ingredients varialbe values --> <tr data-name="ingredients"> <!-- Where ingredient variable value will be shown --> <td data-name="ingredient"></td> <!-- Where measure variable value will be shown --> <td data-name="measure"></td> </tr> </tbody> </table>
-
Javascript Code 1
new LocalComponent('cocktail-ingredients').compile({ingredients: [ {ingredient: "gin", measure: "3 ounces"}, {ingredient: "vodka", measure: "1 ounce"}, {ingredient: "Lillet Blanc", measure: "1/2 ounce"} ]});
As alternative the THML element could be retrieved at a certain url, in this case the alternative code should be a bit different:
-
Local HTML Code
<div id="cocktail-ingredients-table-here"></div>
-
Remote HTML Code See previouse example
-
Javascript Code 2
let myComponent = new RemoteComponent('http://somehost.com/path/to/template.html', 'cocktail-ingredients-table-here') myComponent.load().then(el=>{ myComponent.compile({ingredients: [ {ingredient: "gin", measure: "3 ounces"}, {ingredient: "vodka", measure: "1 ounce"}, {ingredient: "Lillet Blanc", measure: "1/2 ounce"} ]}); });
Maybe a more profitable way to adopt Shaken-js is to extend their classes adding custom methods. Here is an example.