模板

模板

thin.js目前可以使用以下六种模板：

1. string template
2. element template
3. if 结构
4. switch case 结构
5. 模板函数
6. 前述五种模板组成的数组

string template

模板可以是一个字符串，这是最简易的模板，可以使用数据访问器填充内容。

"good morning [[属性名]]~！"

注意，如果模板内容是html代码时应确保html标签结构完整，将标签开始标记和结束标记分别写在两个模板中将导致异常。

element template

element模板本质上是一个包含“e”属性成员的javascript对象，可以根据e指定的element name生成html元素，并设置属性、样式、绑定数据、事件。

{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			双向绑定数据

if 结构

用于根据条件真假决定使用哪个模板。

{
   if: 布尔表达式|判断函数,
   then: 真模板,
   else: 假模板
}

switch case 结构

用于根据条件决定在一组模板中使用哪一个。

{
   switch:"[[参数]]",
   case:{
       "条件1":"template1",
       "条件2":"template2"
       default:"default template"
   }
}

函数模板

模板可以是一个函数，渲染时会将当前位置的dom元素和绑定的数据传递给函数，用户可以编写自己的javascript代码进行渲染或其他操作。

function(p){
   // some code here.
}

输入参数成员：

成员	类型	说明
container	domelement	当前dom容器
data	object	当前数据

模板数组

由前述5种模板组成的数组。

注意：根模板为数组时数据访问器无效。