template模版引擎的使用（underscore.js）

模版引擎的概念：模板引擎是为了使用户界面与业务数据(内容)分离而产生的,把dom元素进行动态生成与数据进行动态的绑定

var options = [

{

"text": "居民身份证",

"value": "01"

}

, {

"text": "护照",

"value": "02"

}

, {

"text": "军官证",

"value": "03"

}

, {

"text": "驾驶证",

"value": "05"

}

, {

"text": "港澳回乡证或台胞证",

"value": "06"

}

]

场景一：

先定义好模版，再对模版进行数据的渲染

var tpt= '<select id="<%=id%>" class="com_listfield_select"><%for(var i =0; i < options.length; i++) {%><option value="<%=options[i].value%>"><%=options[i].text%></option><%}%></select>';

_.template(tpt,{id:_.uniqueId('listfield'),options: options})

场景二：

放在函数里面，把模版返回出去

function getTempate(){

var tpt= '<select id="<%=id%>" class="com_listfield_select"><%for(var i =0; i < options.length; i++) {%><option value="<%=options[i].value%>"><%=options[i].text%></option><%}%></select>';

return _.template(tpt,{id:_.uniqueId('listfield'),options: options})

}

场景三：

用script标签写好，模版放在dom元素里面，数据在js里面做渲染

<div>

<script type="text/template" id="templateEl">

<select id="<%=id%>" class="com_listfield_select"><%for(var i =0; i < options.length; i++) {%><option value="<%=options[i].value%>"><%=options[i].text%></option><%}%></select>

</script>

</div>

<script type="text/javascript">

var tpt = _.template($('#templateEl').html(),{id:_.uniqueId('listfield'),options: options})

$(document.body).append(tpt);

</script>