d-tpl
a tpl engine for html template with directives attributes
Install
npm install d-tpl
Test
mocha test/test.js
Example
if we have a HTML fragment with directives like this:
we can compile it to a tpl fun with filters:
var tpl = ;var src = ; // get the HTML fragmentvar tplFun = tpl;
then, we can use this tpl function to output the HTML by datas and filters:
var data = getData(); // get the data
var filters = require('./filters');
var output = tplFun(data, {
filters: filters
});
if the data like this:
// data.json/* * format: * { * componentName: { * key: value, * subComponentName: { * key: value * } * } * } * * this data structure use nesting to represent the relationship between components * */ "test": "list": "name": "Jack" "isShow": true "isRed": true "size": 12 "pwd": "123456" "isCheck": true "imgSrc": "http://www.baidu.com/logo1.png" "attrs": "width": 30 "height": 30 "list": 1 2 3 "name": "John" "isShow": true "isRed": false "size": 12 "pwd": "123451231236" "isCheck": false "imgSrc": "http://www.baidu.com/logo2.png" "attrs": "width": 300 "height": 300 "list": 1 2 "name": "Anne" "isShow": false "isRed": false "size": 7 "pwd": "123412312356" "isCheck": false "imgSrc": "http://www.baidu.com/logo3.png" "attrs": "width": 300 "height": 300 "list": 1 2 3 222
and the filters resource like this:
// filters.js/** format:* module.exports = {* componentName: {* filterName: filterFun* }* }** this data structure will not be nested* that is, this data structure does not contain the relationship between components**/moduleexports =test:{list;return list;}{return size > 10;}{list;return list;}{return listlength;};
we will get the HTML like this:
Jack_long 4 John_long 3 Anne_long 5
for performance, the engine will set a function value named funSerializationStr
into the tpl function, this value is the serialization of tpl function, you can save it in file as a node module
for example, like this:
var fs = ;fs; // other modules can use itvar tplFun2 = ;var data = ; // get the datavar filters = ; var output = ;
Reference
- Q.js this tpl is implemented to serve the mvvm library, Q.js, in the 0.0.1 version.
TODO
- 现在的data是以组件名作为key的,如何解决包含重复组件的data?
- 在data格式中,子组件的data是属于父组件data的一个值,同样以组件名为key(会出现上一个问题);如何解决父组件自身数据与子组件名同名问题?
- 实现通用方案,通过提供扩展点,实现能编译所有directives式语言的模板的能力