template7是framework7的内置模板引擎，在此之前运用过jquery-tmpl，不过方才翻开github看了下，已住手更新，而且将要被JsRender所替换。妹的，JsRender又是什么鬼啊？扯远了，之前听过他人关于jquery-tmpl模板引擎的手艺分享，它的源码加上一堆诠释才100多行。在此之前模板给我的观点是jsp那种，要与java后端一同合营运用的，后端用数据模型把值传到前台，前台再经由过程${}猎取值。假如须要举行一些前提推断，则运用jstl。假如前台要异步部分革新页面，则用ajax来完成，返回的数据以拼字符串的体式格局把DOM嵌入到本来的页面，然则拼字符串这类体式格局着实坑爹，不仅写来痛楚，保护起来也痛楚。厥后就运用js动态增加HTML，然后再用js把数据添补进去。写法有以下两种：
<script type="text/html" id="theTemplate">
<div class="dialog">
<div class="title">
<img src="close.gif" alt="点击能够封闭" />亲爱的提示条
</div>
<div class="content">
<img src="delete.jpg" alt="" /><span>您真的要GG吗？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="肯定" class="btn"/>
<input id="Button3" type="button" value="作废" class="btn"/>
</div>
</div>
</script>
var template = document.getElementById("theTemplate").innerHTML ;
或：
<textarea id="theTemplate" style="display:none">
<div class="dialog">
<div class="title">
<img src="close.gif" alt="点击能够封闭" />亲爱的提示条
</div>
<div class="content">
<img src="delete.jpg" alt="" /><span>您真的要GG吗？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="肯定" class="btn"/>
<input id="Button3" type="button" value="作废" class="btn"/>
</div>
</div>
</textarea>
var template = document.getElementById("theTemplate").value ;
这类写法长处是：
比拼字符串文雅许多
浏览器不会读取到就衬着，所之内里的img的src也不会自动猎取
瑕玷：
script标签内里不能直接写变量，又须要频仍的操纵修正DOM。
多是基于以上的瑕玷，引入了jquery-tmpl模板引擎，但我以为前端模板的真正意义在于前后端星散，即没法经由过程controller把数据发送到view，只能以接口要求的情势获得数据，然则HTML自身又没有jstl或freemarker那样猎取变量或许举行if推断、each轮回的功用，所以，须要有一种东西来举行功用的替换，这时候前端模板引擎纷纭涌现，八门五花，像我们项目中有效到的underscore.js内置的模板引擎，然则谁人功用比较单一，毕竟模板引擎只是他的一部分，功用够用就好。
而我们本日要说的template7，则是一个功用越发壮大，越发周全的模板引擎，官方说它实行速率也很快，然则究竟快不快，比哪些快，我没去研讨，有兴致的能够本身拿几种模板引擎对照下。
Template7还嵌入了handlebars的表达式{{#}}
<div class="list-block">
<ul>
{{#each items}}
<li class="item-content">
<div class="item-inner">
<div class="item-title">{{title}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
实在个人不喜欢一个模板搞几种表达式，不过猜想作者应该是考虑到在多种情况下都能够运用，即{{}}可能在当前的上下文中有了其他的用法或许寄义，假如我模板也请也运用这个就会发生争执，至于能有什么用法，不要问我，我不晓得，但我晓得jquery-tmpl模板中有两种取变量值的写法，${}和{{=}}，${}的写法是和freemarker、jsp等模板的取值要领是一样的，所以会发生殽杂，所以平经常使用{{=}}。
模板中我们常常能见到的要领，这里就简朴的一笔带过，置信看官网的引见会越发清楚明了。我们就主要说一下不经常使用的或许其他模板引擎里没有的一些功用。
Template7有以下表达式语法:
Variables
{{title}}– plain variable. Outputs “title” variable in current context
{{../title}}– plain variable. Outputs “title” variable in parent context
{{../../title}}– plain variable. Outputs “title” variable in parent context of parent context
{{this}}– plain variable. Outputs variable equals to current context
{{person.name}}– plain variable. Outputs variable equals to “name” property of “person” variable in current context
{{../person.name}}– plain variable. The same but for parent context
{{@index}}– access to additional data variable. Such data variables could be used in helpersBlock expressions
{{#each}}– begin of block expression
{{else}}– begin of block inverse expression (where supported)
{{/each}}– end of block expression
{{#each reverse="true"}}– begin of block expression with passedreverse:truehash argumentsHelpers
Helpers could be plain expressions and block expressions:
{{join myArray delimiter=", "}}– execute “join” helper and pass there “myArray” variable of current context anddelimiter:', 'hash argument
以上比较少见的是{{../title}},{{this}},{{person.name}}，{{@index}}这几种写法，那我们就举个栗子（非糖炒）说一下：
<script id="tmplOne" type="text/template7">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
<ul>
{{#each arr}}
<li>{{sex}}======={{birthday}}======={{../firstName}}</li>
{{/each}}
</ul>
<p>----------------</p>
<ul>
{{#each arr reverse="true"}}
<li>{{sex}}======={{birthday}}</li>
{{/each}}
</ul>
</script>
var context = {
firstName: 'John',
lastName: 'Doe',
arr: [
{
sex: 'boy',
birthday:'1991-1-1'
},
{
sex: 'girl',
birthday:'1991-2-2'
}
]
};
输出以下：
Hello, my name is John Doe
boy=======1991-1-1=======John
girl=======1991-2-2=======John
----------------
girl=======1991-2-2
boy=======1991-1-1到这里想必人人都已看邃晓了吧，假如写成下面如许，
{{#each arr}}
<li>{{sex}}======={{birthday}}======={{firstName}}</li>
{{/each}}{{firstName}}是没法取到值得，由于当前一级是arr内里，往上一级才或取到值。
第二个：
<script id="tmplOne" type="text/template7">
<p>Here are the list of people i know:</p>
<ul>
{{#each people}}
<li>{{@index}}======== {{this.test}} ********{{this}}</li>
{{/each}}
</ul>
<p>{{person.name}}</p>
</script>
var context = {
people: ['John Doe', {test:'test'}],
person: {
name: '虚空假面'
}
};
//输出效果：
Here are the list of people i know:
0======== ********John Doe
1======== test ********[object Object]
虚空假面下面说一说内置的一些辅佐要领：
{{join myArray delimiter=”, “}}
这个也是很少见到，有什么用，怎样用？
官方是这么说的：This plain helper will join Array items to single string with passed delimiter
<p>Genres: {{join genres delimiter=", "}}</p>
{
genres: ['comedy', 'drama']
}
输出：
<p>Genres: comedy, drama</p>这个要领有木有很像js中的join()要领，
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
输出：
George,John,Thomas实在二者的作用也是一样的，都是把数组对象转成字符串，并用指定标记离隔。
{{#each}}…{{else}}…{{/each}}
之前用过{{#if}}...{{else}}...{{/each}},然则见到{{#each}}...{{else}}...{{/each}}觉得一脸懵逼
看栗子吧：
<p>Car properties:</p>
<ul>
{{#each props}}
<li>{{@key}}: {{this}}</li>
{{else}}
<li>No properties</li>
{{/each}}
</ul>
<p>obj:</p>
<ul>
{{#each obj}}
<li>{{@key}}: {{this}}</li>
{{else}}
<li>No properties</li>
{{/each}}
</ul>
<p>exp:</p>
<ul>
{{#each exp}}
<li>{{@key}}: {{this}}</li>
{{else}}
<li>No properties</li>
{{/each}}
</ul>
var context = {
props: {
power: '150 hp',
speed: '200 km/h',
},
obj: {},
exp:false
};
输出：
Car properties:
power: 150 hp
speed: 200 km/h
obj:
No properties
exp:
No properties这下邃晓了吧，实在他就下面这类情势的缩写。
<ul>
{{#if obj}}
{{#each obj}}
<li>{{@key}}: {{this}}</li>
{{/each}}
{{else}}
<li>No properties</li>
{{/if}}
</ul> {{#unless}}…{{else}}…{{/unless}}
这个跟if else相反，没什么好说的，觉得有些鸡肋，有了if else还造这玩意干啥？不懂
{{#with}}…{{/with}}
这个跟{{#each}}...{{/each}}差不多，也是个鸡肋，对照栗子以下：
<p>with</p>
{{#with props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/with}}
<p>each</p>
{{#each props}}
<p>Car has {{this}} {{@key}}</p>
{{/each}}
var context = {
props: {
power: '150 hp',
speed: '200 km/h',
}
};
输出：
with
Car has 150 hp power and 200 km/h maximum speed
each
Car has 150 hp power
Car has 200 km/h speed {{#variableName}}…{{/variableName}}
If you pass a block expression with helper name that is in the
expression context, then it will work like {{#each}} helper for this
context if it is an Array, and will work like {{#with}} helper if it
is an Object:
以上是官方的诠释，也就是依据传入数据的范例是对象照样数组自动的去实行。
<p>数组：</p>
<ul>
{{#people}}
<li>{{name}} - {{age}} years old</li>
{{/people}}
</ul>
<p>对象：</p>
{{#props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/props}}
<p>其他</p>
{{#title}}
<p>{{this}}</p>
{{/title}}
people: [
{
name: 'John Doe',
age: 18
},
{
name: 'Mark Johnson',
age: 21
}
],
props: {
power: '150 hp',
speed: '200 km/h'
},
title: 'Friends'
输出：
数组：
John Doe - 18 years old
Mark Johnson - 21 years old
对象：
Car has 150 hp power and 200 km/h maximum speed
其他
Friends这个要领看起来挺好用，然则我以为会致使顺序读起来不明确，出了错也不容易排查，照样以为鸡肋。
{{escape}}
This plain helper returns escaped HTML string. It escapes only the following characters: < > " &
这个要领用来把几个特定的字符< > " &转码成HTML字符串，现在我还没想到在什么场景下须要转码。
<h1>{{title}}</h1>
<p>{{escape body}}</p>
{
title: 'Paragraphs',
body: 'We need to use <p> tags to add paragraphs in HTML',
}
<h1>Paragraphs</h1>
<p>We need to use <p> tags to add paragraphs in HTML</p>{{js “expression”}}
js表达式，我以为这个要领照样比较有效的，之前曾碰到一个题目，经由过程API背景传过来一堆内容，然后我把它悉数填到模板里，然则，这些数据里有些内容，比方文件大小，传过来是字节的，我须要依据大小转成KB,MB,GB等单元，这一步还好，然则计算出来每每小数点后好多位，比方3.222222MB,模板当时用的jquery的，当时就懵逼了，只能去找后端。然则假如模板能够用js表达式的话，这个题目就可以处理了。
<h3>{{title}}</h3>
<p>Price: ${{js "this.price * 1.2"}} </p>
<p>{{js "this.inStock ? 'In Stock' : 'Not in stock'"}} </p>
<p>{{js "this.number.toFixed(2)"}}</p>
title: 'iPhone 6 Plus',
price: 1000,
inStock: true,
number:2.22222
输出：
iPhone 6 Plus
Price: $1200
In Stock
2.22{{#js_compare “expression”}}…{{/js_compare}}
在我看来还不如if else用的随手，鸡肋
<h3>{{title}}</h3>
<p>Price: ${{price}} </p>
<p>{{#js_compare "this.color === 'white' && this.memory > 16"}}Not in stock{{else}}In stock{{/js_compare}} </p>
<p>
{{#if "this.color === 'white' && this.memory > 16"}}
Not in stock
{{else}}
In stock
{{/if}}
</p>
title: 'iPhone 6 Plus',
price: 1000,
color: 'white',
memory: 32
iPhone 6 Plus
Price: $1000
Not in stock
Not in stock另外，template7还支撑增加、删除自定义helpers，即依据须要扩大本身须要的要领，觉得也没啥卵用
Template7.registerHelper(name, helper)
Template7.unregisterHelper(name)name – string – helper namehelper – function – helper function to handle passed context
另有几个不经常使用的要领，就不在说了，有兴致本身去官网看一下。
总的来说，觉得template7内里反复的东西太多，之前有看过jquery-tmpl的源码才不到100行，underscore.js内置的模板彷佛70行之内。而它500行摆布，搞了一堆七七八八的内容，但真正平经常使用到的只是少部分，假如让我用的话，我可能会去掉内里的一些内容再用，或许直接选用越发精简的模板引擎。
临时先写到这里，有时间，再补充一点对源码的熟悉。
