前端-JQ-JSRender-IE可用模板

JSRender模版化-依赖JQ

挂载点：
　　<div id="result"></div>
模版：
　　<script type="text/x-jsrender" id="Tmpl">
　　　　直接显示变量要:key(类似于.key)
　　　　<p>Name: {{:name}}</p>
　　　　<p>Age: {{:age}}</p>
　　　　<p>{{:Details.Hobby.TableTennis}}</p>
　　　　引用变量使用key
　　　　<p>
　　　　　　条件判断
　　　　　　　　{{if age >= 18}}
　　　　　　　　　　大于18岁
　　　　　　　　{{else age >= 16&&age < 18}}
　　　　　　　　　　大于16岁小于18岁
　　　　　　　　{{else}}
　　　　　　　　　　未成年
　　　　　　　　{{/if}}
　　　　　　引入模板
　　　　　　　　{{if age >= 18 tmpl="#tmp2" /}}
　　　　</p>
　　　　<p>
　　　　　　for循环(默认参数是传入的顶级参数，有参数是顶级参数.key值)
　　　　　　{{for hobbies}}
　　　　　　　　<div>下标{{:#getIndex()}}或{{:#index}}(不建议使用)</div>
　　　　　　　　<div>取值{{:#data}}</div>
　　　　　　{{else}} 如果for对象为空
　　　　　　　　<div>No members!</div>
　　　　　　{{/for}}
　　　　</p>
　　　　<p>
　　　　　　对象遍历
　　　　　　{{props price}}
　　　　　　　　<p>键 {{:key}} 值 {{:prop}}</p>
　　　　　　{{/props}}
　　　　</p>
　　　　<p>
　　　　　　将值传入下一层组件
　　　　　　{{include age tmpl="#tmp1" /}}
　　　　</p>
　　　　<p>
　　　　　　过滤器使用
　　　　　　<h3>{{upper:name}}</h3>
　　　　</p>
　　　　<p>
　　　　　　计算器使用
　　　　　　<h3>{{:~hello(age}}</h3>
　　　　</p>
</script>
<script type="text/x-jsrender" id="tmp2">
　　<h3>大于{{:#data}}岁</h3>
</script>
　　挂载数据：
<script>
　　//设置数据
　　var data = {
　　　　'name': 'van',
　　　　'age': 18,
　　　　'Hobby': {
　　　　　　'TableTennis': 'I like Table Tennis',
　　　　　　'Basketball': 'I like Basketball'
　　　　},
　　　　hobbies: ["游泳", "羽毛球"]
　　}
　　//过滤器
　　$.views.converters({
　　　　upper: function (val) {
　　　　　　return val.toUpperCase();//转大写
　　　　}
　　})
　　//计算器
　　$.views.helpers({
　　　　hello: function (age) {
　　　　　　return 'Hello ' + age;
　　　　}
　　})
　　//模板填充数据
　　var html2 = $("#Tmpl").render(data);
　　//挂载数据
　　$("#result").append(html2);
</script>