juel
For rendering html element from javascript object using by html template in client-side.
Installation
$ npm install juel
Usage
Your browser does not support JavaScript! Click Items {{ todoList.map(addItem) }} {{ text }}
index.js file
const juel = ; // for update global scope { scopetodoList = id: 1 text: "Item1" count: 0 id: 2 text: "Item2" count: 0 id: 3 text: "Item3" count: 0 id: 4 text: "Item4" count: 0 id: 5 text: "Item5" count: 0 ;} // for update sub template element scope { thiscount += 1;} // write scope to console { console;} // create global scope to apply changes to the DOM// scope objects created as a global variable are meant to be used in multiple juel// all juel objects create the scope object if you create the scopevar scope = juelscope todoList: id: 1 text: "Item1" count: 0 id: 2 text: "Item2" count: 0 id: 3 text: "Item3" count: 0 ; // to read templates written to DOMjueltemplate; // single and multiple templates can be added from within the scriptjueltemplate;jueltemplate; // add a single template into DOMjuel; // multiple sub templates for scope in template can be added to DOM// the only difference should be create instead of append and output should be HTMLvar todoListJuel = juel;// juel.get via setId function to access the juel objectconsole; // you can create more than one juel for the same scope object and change the two juel objects via scopevar countListJuel = juel;// juel.get via setId function to access the juel objectconsole; // translate scope object into json typejuel;
index.build.js file
index.build.js file is generated from index.js with libraries like browserify or babel or parcel or webpack.
Build Sample
juel Container
If you want to write a script without container, write it into the juel tag. During append operation juel disappears.
{{ value }}
Changelog
All notable changes to this project will be documented in this file.
Changelog
Examples
Basic Usage
This example shows the most basic way of usage.
License
This software is free to use under the JosephUz. See the LICENSE file for license text and copyright information.