live-template
v0.0.6
Published
HTML Templating + Automatic Model Data Binding.
Downloads
1
Readme
Live Template v0.0.6 alpha
Tiny ( less than 10Kb gzipped ) Reactive Templating Engine for JS (ES6)
- Declarative bindings (html attributes & placeholders)
- Reactive GUI ( Automatic UI refresh when the data models changes)
- Templating system
- MVVM capabilities
- No dependencies
Usage example
View :
<div id="myView">
Name: <input type="text" lt-value="myModel.name">
<div> Your name is : {{myModel.name}} </div>
<input type="button" lt-on-click="myModel.sayHi()">
</div>
Model:
let myModel = new Template.Model('myModel' , {
name: '',
sayHi : e=> alert( 'Hi '+ myModel.name )
});
Template.create('#myView')
Reactive
The two way data binding automatically performed in the models,when declared, allows automatic updates in the DOM in real time.
Any change in the DOM, will be reflected also, to the model(s), when necessary.
Available Directives
lt-for-*
<div lt-for-item="myModel.items" lt:index="myIndex">
<div> {{myIndex}} - {{item.name}} </div>
</div>
Performs iteration to the provided model iterable, and renders the contents of the block as many times as iterations can be eprformed. The usage of the :index
directive modifier, allows to use an index key.
lt-if
<div lt-if="myModel.visible" >
If you see this is because myModel.visible=true
</div>
Shows/hides the element if the model prooerty evaluates to true/false
lt-on-*
<div lt-on-click="myModel.sayHi()" >
Click me to trigger an action!
</div>
Adds an event listener to the element with the provided callback.
lt-value
<input type="text" lt-value="myModel.name">
Performs a (two way) data binding with the provded model prooerty