秋前端开发课件-jse2e-5视图引擎

5-Node.js视图引擎2015

Summer,

xi'an本章内容视图引擎简介客户端视图引擎KendoUI、Handlebars.js、AngularJS服务器端视图引擎Jade视图引擎视图引擎视图引擎（模板引擎）是创建视图的框架/库使用编程语言Web视图引擎是HTML和JavaScript的混合给定的模板/视图，JavaScript创建了有效的HTML代码JavaScript视图引擎有大量的JavaScript视图引擎，能分离到客户端和服务器端客户端：KendoUI,Handlebars.js,jQuery,AngularJS,

等服务器端：Jade,

HAML,

EJS,

Vash,

等为什么使用视图引擎？提高开发者的效率，并简化HTML代码编写自动创建DOM元素，几乎不用手动的DOM客户端视图引擎KendoUI,

AngularJS,

Handlebars.js客户端视图引擎客户端视图引擎（模板）用于解析数据数据从一些地方获取如，用AJAX数据也可以是JSON、XML或纯文本服务器端视图引擎解析服务器上的数据客户端（浏览器）接收到准备使用的HTML模板用Handlebars.jsHandlebars.js是创建客户端模板的库Handlebars支持：单次值绑定到JavaScript对象元素集合的迭代条件模板Handlebars：示例创建用所有mustache类型的列表Handlebars：示例创建用所有mustache类型的列表<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板Handlebars：示例创建用所有mustache类型的列表<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板JavaScript<-var

model

=

{title:

' o

mustache!',types:

['Hungarian',

'Dali','Imperial',

…]}Handlebars：示例创建用所有mustache类型的列表所有绑定都在{{}}中完成<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板JavaScript<-var

model

=

{title:

' o

mustache!',types:

['Hungarian',

'Dali','Imperial',

…]}Handlebars.js模板演示KendoUI模板KendoUI模板是KendoUI框架的一部分可在kendo.core.js中找到可单独使用KendoUI模板支持：单次值绑定到JavaScript对象元素集合的迭代条件模板KindoUI模板：示例创建技术表<h1>#:

title

#</h1><table>#

for

(var

i

=

0;

i

<

technologies.length;

i+=1)

{#<tr><td><inputtype='checkbox'

id="technology-#:

i

#"

/></td><td><label

for="technology-#:

i

#">#:

technologies[i].name

#</label></td></table>var

model

=

{title:

'Technologies',technologies:[{name:'ASP.NET',field:'web'

},{name:'Node.js',field:'web'

},{name:'WPF',field:'windows

desktop'

},{name:'Android',field:'mobile'

}]};KendoUI模板

演示AngularJS模板AngularJS模板是AngularJS框架内核的一部分实际上为控制器表达视图AngularJS支持：双向数据和事件绑定到JS对象元素集合的迭代条件模板AngularJS模板：创建图像幻灯<div

id="wrapper"ng-controller="ImagesController"><divclass="slider"><strong>{{currentImage.title}}</strong><img

ng-src

=

"{{currentImage.src}}"

width=800

/><ul

class="slider-images-list"><ling-repeat="image

in

images"><img

ng-src="{{image.src}}"ng-click="changeCurrent(image)"/></li></ul></div></div>app.controller('ImagesController',

function

($scope)

{$scope.images

=

[{title:

'QA

Academy

2012/2013Graduation',src:

'imgs/9511183282_cbe735bb73_c.jpg'}

…

]$scope.currentImage

=

$scope.images[0];$scope.changeCurrent

=

function(image){$scope.currentImage

=

image;};});AngularJS模板

演示服务器端视图引擎服务器端视图引擎服务器端视图引擎返回准备使用的HTML到客户端（浏览器）在服务器上解析数据为HTML*Web应用，通过服务器视图引擎创建的，并非真正的单页应用大多数情况下Jade模板引擎Jade是服务器视图引擎生产HTML为结果可被解析：手动的（使用CMD/命令行）自动的，使用任务运行器自动的，使用Express之类的框架Jade比HTML更有表现力和动态性Jade模板可被解析，基于JS模型或条件使用Jade安装Jade用Node.js创建index.jade文件运行创建index.html以内容：$

npm

install

jade

-guleach

val

in[1,

2,

3,

4,

5]li=

'Item

'

+

val$

jade

index.jade<ul><li>Item

1</li><li>Item

2</li><li>Item

3</li><li>Item

4</li><li>Item

5</li></ul>使用Jade

演示Jade特点：Tag省略开始和结束甚至是尖括号ID和class以CSS选择器设置#id和.class<div

id="wrapper"><table

class="special"><tr><th>Header

1</th><th>Header

2</th></tr><tr><td>Data

1</td><td>Data

2</td></tr></table></div>#wrappertable.specialtrth

Header

1th

Header

2trtd

Data1td

Data2解析为Jade特点：AttributeAttribute特性写成'('和')'用逗号','分隔<div

id="wrapper"><header><h1

id="logo"><ahref="..."><img

src="..."/></a></h1><nav

id="main-nav"><ul><li

class="nav-item"><a

href="...">...</a></li></ul></nav></header></div>#wrapperheaderh1#logoa(href='...')img(src='…')nav#main-nav:

ulli.nav-itema(href='…')解析为Jade特点演示Jade模型Jade能够创建markup标记，使用数据模型如，给定数组项，放置其到表格中#wrapperheaderh1#logoa(href='...')=

titlenav#main-nav:

uleachiteminnavli.nav-itema(href=

item.url)=item.title<div

id="wrapper"><header><h1

id="logo"><a

href="...">Loremipsum</a></h1><nav

id="main-nav"><ul><li

class="nav-item"><a

href="#home">Home</a></li><li

class="nav-item"><a

href="#about">About</a></li></ul></nav></header></div>解析为Jade模型演示Jade中运行Jade可以包含条件、循环等HTML基于模型创建if

conditionh1.success|Fulfilled!elseh1.error|

Not

fullfilledmodel

={condition:true}model

={condition:f