Apache Cordova 使用Handlebars模板

使用 Handlebars 模板

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

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

步骤1：定义模板

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

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

<script src="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/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="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/{{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设备上测试你的应用程序。