huzi.js
Summary
huzi.js is a jQuery plugin used for js templating development .
- support template as string or html files, make the project more orangizable.
- support JSON data binding
- support contrinal logic and loops; also support muliti-level embedded loops and logic
- support object oriented object naming conventions binding
- support two ways data binding between form and JSON data
- support form data validation during form binding
- support node.js express template engine
JSON data and template
Huzi using JSON as binding data
var products = [ { "id": "bb_070915_001", "images": [ {url:"img/img1.jpg", title:"p1"}, {url:"img/img2.jpg", title:"p2"}, {url:"img/img3.jpg", title:"p3"}], "name": "Canvas check hobo bag", "price": "795", "desc": "Medium canvas check hobo bag", "date": "07/09/2015" }, ...]
Huzi template can be a string or html file loaded using AJAX
// using string template var temp = ["<div>", "{{if this.a < 0}}", "<span> a > 0 </span>", "{{else}}", "<span> a <= 0 </span>", "{{endif}}", "</div>"].join(""); //or html in a file and load using AJAX <div> {{if this.a > 0}} <span> a > 0 </span> {{else}} <span> a <= 0 </span> {{endif}} </div> $.get("template/shared/demo1.html", function(temp){ ... }
Usage
Init a jQuery plugin
$("#container").huzi({ data: products, template: temp }); })
To call a Huzi function or data
$("#container").data("huzi").data = newdata; $("#container").data("huzi").rebind(newdata);
{{repeat array}}
to do the loops,{{repeat}}
for default array.{{repeat images}} <img src="{{url}}" alt="{[title}}"/> {{endrepeat}}
{{if }} ... {{elsif }} ... {{else}} ... {{endif}}
to do the condictional logicthis
in the logic pointing to the current scope,that
point to current jQuery element, like:{{that.data}}
equals$("#element").data("huzi").data
{{if this.price > 100}} <span class="mark" > {{price}} </span> {{else}} <span > {{price}} </span> {{endif}}
Conditaion logic and loops can combine together and embed each other
var products_temp = [ '<table class="table">', '<tr><th style="width:400px;">'; '<th><th>Name<th>', '<th>Description<th><th>Price<th></tr>', '{{repeat}}', '<tr><td>', '{{repeat images}}', '<img src="{{url}}" class="img-thumbnail" alt="{{title}}"/>', '{{endrepeat}}</td>', '<td>{{name}}</td><td>{{desc}}</td><td ', 'class="{{if parseInt(this.price) > 600}}mark{{endif}}"</td>', '</tr>', '{{endrepeat}}', '</table>'].join(""); $("#products_div").huzi({ data:products, template: products_temp, bindingComplete: function(e){ console.log(this); } });
{{fun funname parm1 parm2 ...}}
can be used to call a external function<script> var formatMoney = function(str){ ... return "$" + str; } </script>
//in template ... price : {{fun formatMay price}} </pre> </div>
Form Data binding and validation
Implemented two way data binding between javascript object and form elements, form validation and functions to toggle between read only and edit mode. Function getFormData and setFormData
can be used menually binding data between form elements and JSON object. readonlyForm and enableForm
can be used to toggle between read only and edit mode.
Demo
A small search engine created with huzi.js: product-list.html
As a Node.js template engine
- Install in node:
npm install huzi
- To use as a template engine
app.set('views', __dirname+'\\views'); app.set('view engine', 'huzi'); app.get('/', function(req, res) { //hello.huzi in views res.render('hello',products); });
Reference
To call a variable or function in Huzi plugin is the same as in Bootstrap plugin, like: $("#somediv").data("huzi").rebind(data)
- appendable
- when doing rebinding, you can define appendable in options to true, thus the value will be appended to the jQuery element, instead of replace it. The default value is false.
- bind
- you can call the bind function to force binding with current data and template.
- data
- data is the data object saved in JSON format.
- rebind(data)
- you can call the rebind function to force a data binding with new data.
- template
- template varible used to save the template string.