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