Direct HTML Templating with TLX
TLX a small (3.7K minimized and gzipped) multi-paradigm front-end library now supports direct HTML two-way data bound templating. So what does that mean? No complex set-up code, no JSX, just plain old HTML with industry standard embedded JavaScript template literal notation. It can’t get much simpler than this:
<div id="message">Hello ${firstName}</div>
First Name: <input id="name" name="firstName" value="${firstName}"><script src="https://unpkg.com/tlx/browser/tlx.js"></script><script>
// create an empty reactive model to share
const model = tlx.reactor();// bind message area to model
tlx.view(document.getElementById("message"),{model});// bind input field to firstName based on name attribute above tlx.view(document.getElementById("name"),{model,linkModel:true})
</script>
Displays as:
Hello
First Name: [___________]Any time the value in the firstName input element changes the message div will be refreshed.
Hello Joe
First Name: [Joe__________]The initial HTML elements on the page are their own templates! They can be as broad in scope, e.g. a root element with many children, or as narrow, e.g. one element, as you desire. The TLX library will keep track of all references and automatically update just those portions or the DOM that change based on the data they reference.
You can try it on JSFiddle.
Of course, despite its small size, that is not all that TLX will do. It also supports alternate template sources and manual state or render updates using individual calls tolinkModel, which is similar to linkState in Preact. And, it has lifecycle callbacks like Vue’s beforeUpdate and updatedalong with state watchers. Components? No problem! Re-use industry standard custom elements or build them automatically from templates … shadow DOM and all. Want more? You can also associate custom controllers or a basic router with any view. And, it supports server based rendering.
Visit https://github.com/anywhichway/tlx for more detail and give TLX a try!
