PURE JavaScript模板库的改进

来源：OurJS.cn  原文：http://www.ourjs.cn/show.php?id=597

 

　　PURE是一个JavaScript的模板引擎。新版本PURE的改进包括：

• 自动表现（auto-rendering）:  新的PURE有了一个新的方法，用于将你的HTML和JSON数据绑定。通过class属性给HTML和JSON数据建立映射。
• 递归模块调用。（要了解更多，可访问http://beebole.com/pure/getting_started.html#example6）
• 事件绑定到HTML。（了解更多，可访问http://github.com/pure/pure/wikis/attach-events-to-your-html）
• 改变模块根节点的id
• 能更好地处理字符串值
• 等等

要了解更多这个库的使用方法，可以查看PURE的官方文档 。

“自动表现(auto-rendering)”例子：

JAVASCRIPT:

1.  
2. $('#hello').autoRender({ "who": "Mary" });}
3.  

 

JAVASCRIPT:

1.  
2.   button.value = 'loading data...';
3.   var script = (button.id == 'b4_2') ?　'js/jsonBig.js':'js/jsonSmall.js';
4.   $.getJSON(script, function(context){
5.  
6.   var directive = {
7.     'tbody tr td[onclick]':'"clickLine(this)"',
8.     'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
9.     'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
10.     'tbody tr td[style]':'\'cursor:pointer\'',
11.                
12.     'tbody tr[class]+':
13.         function(context, items, pos){
14.           var oddEven =  (pos % 2 == 0) ? 'even' : 'odd';
15.           var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
16.           return oddEven + ' ' + firstLast; }}
17.  
18.   $('table.players.2').autoRender(context, directive);
19.  
20.   button.value = 'Refresh the page to render again';});}
21.  

 来源：OurJS.cn  原文：http://www.ourjs.cn/show.php?id=597