在本部分中,我們?cè)黾右粋€(gè)員工細(xì)節(jié)視圖。由于現(xiàn)在該應(yīng)用程序有一個(gè)以上的視圖,我們也增加一個(gè)簡(jiǎn)單的視圖路由機(jī)制。
打開index.html,并添加一個(gè)模板,以提供詳細(xì)的員工視圖:
<script id="employee-tpl" type="text/template">
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left" href="#">
<span class="icon icon-left-nav"></span>
</a>
<h1 class="title">Employee</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell media">
<img class="media-object pull-left emp-pic" src="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/{{pic}}">
<div class="media-body">
{{ firstName }} {{ lastName }}
<p>{{ title }}</p>
</div>
</li>
<li class="table-view-cell media">
<a href="tel:{{ officePhone }}" class="push-right">
<span class="media-object pull-left icon icon-call"></span>
<div class="media-body">
Call Office
<p>{{ officePhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="tel:{{ cellPhone }}" class="push-right">
<span class="media-object pull-left icon icon-call"></span>
<div class="media-body">
Call Cell
<p>{{ cellPhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="sms:{{ cellPhone }}" class="push-right">
<span class="media-object pull-left icon icon-sms"></span>
<div class="media-body">
SMS
<p>{{ cellPhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="mailto:{{ email }}" class="push-right">
<span class="media-object pull-left icon icon-mail"></span>
<div class="media-body">
Email
<p>{{ email }}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</script>
1、在js目錄創(chuàng)建一個(gè)命名為EmployeeView.js的文件,并定義它如下:
var EmployeeView = function(employee) {
this.initialize = function() {
this.$el = $('<div/>');
};
this.render = function() {
this.$el.html(this.template(employee));
return this;
};
this.initialize();
}
2、在index.html中,增加一個(gè)腳本標(biāo)簽以包含EmployeeView.js(僅在app.js的腳本標(biāo)簽之前)。
<script src="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/EmployeeView.js"></script>
1、在index.html中,增加一個(gè)腳本標(biāo)簽以包含router.js(僅在jquery.js的腳本標(biāo)簽之前)。
<script src="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/router.js"></script>
2、打開app.js。增加編譯的員工模板到EmployeeView的原型:
EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());
3、在應(yīng)用程序中定義兩個(gè)使用的路由:
service.initialize().done(function () {
router.addRoute('', function() {
$('body').html(new HomeView(service).render().$el);
});
router.addRoute('employees/:id', function(id) {
service.findById(parseInt(id)).done(function(employee) {
$('body').html(new EmployeeView(employee).render().$el);
});
});
router.start();
});
4、測(cè)試應(yīng)用程序。
更多建議: