模板 : element

element template

模板可以是一个javascript对象。

        template:{
                e:"div",
                t:"hello world！"
        }

对象可以有以下成员：

成员	类型	支持数据漫游器	说明
e	string		元素名
t	string object array function	yes	子模板
id
class
name	string		html name属性
style	object		样式表
width
height
title	string		生成标题标签，当e=fieldset时，生成legend，当e=field/f1/f2/f3时在元素内生成label标签，e为其他值是无效
a	object		html属性
click	function		点击事件处理函数
event	object		事件处理函数定义
data	object	数据
datapath	string	数据路径
options	stringarrayobject		选项值
value			输入项设置值
selected	string		给select下拉选择框设置选中值，建议用value替代。
bind			双向绑定数据

模板:生成元素属性

a : 设置属性

{
    e:"div",
    a:{
        id:"sampleid",
        class:"sampleclass"
    }
}

渲染结果

<div id="sampleid" class="sampleclass"></div>

a的成员的属性名和值将用作渲染出来的节点的属性名和值。

当需要生成的属性名包含特殊字符时，可以使用引号将属性名包括在内。

 a:{
      "data-sample":"sample data"
 }

a的成员也可是函数，以根据数据生成不同的属性。

 a:{
     class:function(p){
          if(p.data.field==="a"){
               return "classa";
          }else{
               return "classb";
          }
     }
 }

传入参数的结构如下：

 { container:container,data:data}

函数需要返回字符串作为生成的属性值。

绑定数据

datapath : 绑定数据

使用数据漫游器将数据绑定到节点，常用于将数组绑定到表行节点渲染表格。

当datapath指向的数据是对象时模板只渲染一次。 当datapath指向的数据是数组时模板会对每一行数据渲染一次。 当datapath指向的数据为null时模板不渲染。

data ：将数据注入当前节点

数据访问器

value

selected

bind

设置样式

style : 设置样式

    {
        e:"div",
        style:{
            width:"300px",
            height:"100px"
        }
    }

渲染结果

    <div style="width:300px;height:100px"></div>

style的成员的属性名和值将用作渲染出来的节点的样式的名和值。

当需要生成的属性名包含特殊字符时，可以使用引号将属性名包括在内。

     style:{
          "font-size":"14px"
     }

style的成员也可是函数，以根据数据生成不同的属性。

     a:{
         "font-size":function(p){
              if(p.data.field==="a"){
                   return "14px";
              }else{
                   return "12px";
              }
         }
     }

传入参数的结构如下：

     { container:container,data:data}

函数需要返回字符串作为生成的样式的值。

事件绑定

click : 绑定click事件处理函数

{
    e:"a",
    t:"click sample",
    click:function(p){
        alert("hi!");
    }
}

传入参数结构

{
    sender:{事件引发元素},
    org_data:{原始数据},
    new_data:{新数据}
}

event : 添加事件侦听器

    {
        e:"div",
        t:"event sample",
        event:{
            click:function(p){
                alert("click");
            },
            dblclick:function(p){
                alert("dblclick");
            }
        }
    }

event的成员名作为侦听的事件名，值函数作为event handler。

handler的传入参数结构如下：

    {
        sender:{事件源},
        event:{事件},
        type:{事件类型},
        org_data:{原始数据},
        new_data:{新数据}
    }