GXTemplate项目介绍

GXTemplate本来是一个内部项目. 后来经过考虑决定开源.

目标人群是初级中级JavaScript开发者

设计原则是 , 轻量化, 简单, 易用, 灵活, 可结合原生JavaScript的写法, 不和其他类库框架冲突

总体来说GXTemplate是一个类库, 可用于绝大部分的项目. 

GXTemplate的一些特征是

1 - 使用 {#脚本代码} 这种方式, 把脚本返回值填充到具体的位置 , 括号前后皆可使用常规文本. 可重复使用.

   例如  <h1> 欢迎回来 , {#myuser.name} !</h1> 

2 - 使用 bind-attribute="{#脚本代码}", 把脚本返回值填充为attribute , 括号前后皆可使用常规文本. 可重复使用.

   例如 <a bind-href='orderdetail.aspx?id={#order.id}'>

3 - 使用 bind.foreach="脚本代码" 来对当前节点进行多次循环. 

   例如 <tr bind.foreach="GetOrders()">

4 - 使用 $item 来接收在foreach循环中数组的每项数据

   例如 <td>{#$item.orderno}</td>

5 - 使用 bind.if="脚本代码" 来判断是否保留一个element (否则移除当前element)

   例如 <p bind.if="!GetOrders().length">没有找到任何订单</p>

6 - 使用 bind.select="脚本代码"来实现bind.if的功能, 并且指定子节点使用返回值作为$item变量

   例如 <div bind.select="GetCurrentOrder()"> Order NO. {#$item.orderno} </div>

7 - 使用 bind.template="脚本代码"来克隆脚本代码返回的element的子节点, 并且继续绑定element的子节点

   例如  <div id='templateElement1' bind.ignore='1' style='display:none'>Name : {#$item.name} </div> <div bind.template="templateElement1"></div>

8 - 使用 bind.oncollect="脚本代码"来相应TemplateCollect(element)的事件

    例如 <input bind-value="{#order.no}" bind.oncollect="order.no=this.value"/>

以上功能, 再加上自定义JavaScript脚本的配合, 即更可快速地完成大部分的界面开发任务.

请阅读我们提供的其他例子, 用少少地时间, 即可精通这个规则很少但用处很大的模板开发模式.