Balloon.2.1 —— UI组件之模板

组件的模板，也就是上文提到的html文件，这些html文件里面会有类似于jsp标记对的特殊符号，这些符号会被组件的属性替换后变成DOM加入到页面上。看下面的2个小例子：

例1：input组件

input组件是最简单的单一组件，假设该组件有如下属性（JSON格式）

{
id: "test_id",
name: "test_name",
className: "test_class",
style: "border:1px solid #ccc;"
}

input的模板如下

<input type="text" id="<%=id%>" name="<%=name%>" class="<%=className%>" sytle="<%=style%>" />

最后生成组件的DOM就是

<input type="text" id="test_id" name="test_name" class="test_class" sytle="border:1px solid #ccc;" />

例2：复选框组件

复选框比input复杂的地方在于有选项，用模板生成会用到一些逻辑控制语句，我们还是先来看复选框组件的属性

{
option:[{id:"nan",name:"男",value:"0"},{id:"nv",name:"男",value:"0"}]
}

复选框模板如下

<% for(var i=0; i < option.length; i++){ %>
<input 
	type="checkbox" 
	id="<%=option[i].id%>" 
	value="<%=option[i].value%>"
	/>
<label for="<%= id %>"><%= option[i].name %></label>
<% } %>

看到上面模板里的for语句了么，是不是和jsp之类的语言很像？其中的option就是对应我们属性里的option，最后生成组件的dom就是

<input 
	type="checkbox" 
	id="nan" 
	value="0"
	/>
<label for="nan">男</label
<input 
	type="checkbox" 
	id="nv" 
	value="1"
	/>
<label for="nv">女</label>

通过上面两个小例子，大家对模板应该有个初步概念了吧，下面在对组件介绍的时候，我会把每个组件模板放出来供大家参考。