前端template-web.js的使⽤
前⾔：
  template-web.js是⼀个模板引擎，简单来说就是在页⾯上创建⼀个模板，然后我们把数据填上去显⽰在页⾯上。
  为什么需要它呢？试想⼀下假设如果你获取了⼀个列表的数据你怎么处理让它显⽰在页⾯上，是每条创建⼀个html然后加上去吗？这样的代码看上去是不是⽐较冗余⽽且显得不是特别美观？所以这个时候我们只要调⽤这个模板简单为⼀条数据书写页⾯加载就可以了，甚⾄如果数据需要判断显⽰不同的效果也可以通过它来做，⽐如得到的列表数据有个字段为0⽽有⼀个为1，需要显⽰不同的效果也可以通过它来做，下⾯我通过三种不同的使⽤⽅式来展⽰它的使⽤⽅法。
  ⼀.获得了⼀个对象直接调⽤
  HTML：
<div id="point">
</div>
<script id="model1" type="text/html">
<div>
{{name}}
</div>
<div>
{{email}}
</div>
</script>
  Js：
$(function(){
var data1={
"name":"Mr.bring",
"email":"11733485@163"
}
var html = template('model1',data1)
$("#point").append(html)
})
  ⼆.获得了⼀个列表循环调⽤
  HTML：
<div id="point">
</div>
<script id="model1" type="text/html">
{{each list item index}}
<div>{{item[0]}}</div>
<div>{{item[1]}}</div>
{{/each}}
</script>
  Js：
$(function() {
var data1 = [
["Mr.bring",  "11733485@163"],
["Mr.autumn",  "11789485@163"],
["Mr.winter",  "11758485@163"],
]
前端页面模板
var html = template('model1', {list:data1})
$("#point").append(html)
})
  三.获得了⼀个列表数据需要进⾏判断
  HTML：
<div id="point">
</div>
<script id="model1" type="text/html">
{{each list item index}}
{{if item[1] == 1}}
<div>True</div>
{{else if item[1] == 2}}
<div>False</div>
{{/if}}
{{/each}}
</script>
  Js：
$(function() {
var data1 = [
["Mr.bring",  1],
["Mr.autumn",  2]
]
var html = template('model1', {list:data1})
$("#point").append(html)
})
  其他：有的时候我们在使⽤模板的时候可能会报错，因为很多的框架内置了模板语法，所以如果需要使⽤该模板的话可能需要对兼容性进⾏⼀些设置，⽐如在django框架中需要在模板中就需要如下修改：
<script id="model1" type="text/html">
{% verbatim %}
  　......
{% endverbatim %}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。