离线下载
PDF版 ePub版

极客学院团队出品 · 更新于 2017-08-19 13:00:07

使用 Handlebars 模板

在JavaScript中编写HTML片段和以编程方式将它们插入到DOM是令人乏味的。它使你的应用程序更难写,更难以维护。HTML模板通过从你的代码中断开用户界面定义(HTML标记)解决了这一问题。这里有很多不错的HTML模板解决方案,包括Mustache.js、Handlebars.js和Underscore.js等等一系列例子。

在本单元中,我们创建了两个模板用以简化员工目录应用程序的代码。我们使用Handlebars.js,但是可以与使用其他HTML模板解决方案实现同样的结果。

步骤1:定义模板

根据如下步骤修改index.html:

1、增加一个脚本标签以包含handlebars.js库:

<script src="lib/handlebars.js"></script>

2、增加ratchet.css和styles.css到index.html的头部

Ratchet 是一个简单的CSS工具包,可以为移动应用程序提供样式。

<link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">

3、创建一个HTML模板以渲染Home View。在主体标签的第一子标签增加本脚本标签:

script id="home-tpl" type="text/template">
    <header class="bar bar-nav">
        <h1 class="title">Directory</h1>
    </header>
    <div class="bar bar-standard bar-header-secondary">
        <input class='search-key' type="search"/>
    </div>
    <div class="content"></div>
</script>

4、创建一个HTML模板以渲染员工列表。在上一个之后立即增加本脚本标签:

script id="employee-list-tpl" type="text/template">
    <ul class="table-view">
        {{#each this}}
        <li class="table-view-cell media">
          <a href="#employees/{{ id }}">
              <img class="media-object pull-left" src="assets/pics/{{pic}}">
              <div class="media-body">
                  {{firstName}} {{lastName}}
                  <p>{{title}}</p>
              </div>
          </a>
        </li>
        {{/each}}
    </ul>
</script>

步骤2:使用模板

在app.js中修改即用函数如下:

1、在service 变量声明以前,立即声明两个变量,这两个变量持有上述定义模板的编译版本:

var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());

2、修改renderHomeView()函数以使用homeTpl模板代替内联HTML:

function renderHomeView() {
    $('body').html(homeTpl());
    $('.search-key').on('keyup', findByName);
}

3、修改findByName() 函数以使用employeeListTpl模板代替内联HTML:

function findByName() {
    service.findByName($('.search-key').val()).done(function (employees) {
        $('.content').html(employeeListTpl(employees));
    });
}

4、测试应用程序。

步骤3:解决iOS7的状态栏问题

在iOS7中,状态栏与应用程序视图重叠。结果是,状态栏文本可能与应用程序的标题文本冲突,如上截图所示。你可以使用状态栏插件解决这个问题。

1、增加状态栏插件:

cordova plugins add org.apache.cordova.statusbar

2、在app.js中,在deviceready处理器的顶部增加以下代码:

StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#ffffff');
StatusBar.styleDefault();

3、再次建立应用程序,并在iOS模拟器或者iOS设备上测试你的应用程序。

上一篇: 设置单页应用程序 下一篇: 创建视图