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>