Apache Cordova 使用Handlebars模板

使用 Handlebars 模板

在JavaScript中編寫HTML片段和以編程方式將它們插入到DOM是令人乏味的。它使你的應用程序更難寫，更難以維護。HTML模板通過從你的代碼中斷開用戶界面定義（HTML標記）解決了這一問題。這里有很多不錯的HTML模板解決方案，包括Mustache.js、Handlebars.js和Underscore.js等等一系列例子。

在本單元中，我們創(chuàng)建了兩個模板用以簡化員工目錄應用程序的代碼。我們使用Handlebars.js，但是可以與使用其他HTML模板解決方案實現(xiàn)同樣的結果。

步驟1：定義模板

根據(jù)如下步驟修改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、創(chuàng)建一個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、創(chuàng)建一個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中修改即用函數(shù)如下：

1、在service 變量聲明以前，立即聲明兩個變量，這兩個變量持有上述定義模板的編譯版本：

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

2、修改renderHomeView()函數(shù)以使用homeTpl模板代替內聯(lián)HTML：

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

3、修改findByName() 函數(shù)以使用employeeListTpl模板代替內聯(lián)HTML：

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

4、測試應用程序。

步驟3：解決iOS7的狀態(tài)欄問題

在iOS7中，狀態(tài)欄與應用程序視圖重疊。結果是，狀態(tài)欄文本可能與應用程序的標題文本沖突，如上截圖所示。你可以使用狀態(tài)欄插件解決這個問題。

1、增加狀態(tài)欄插件：

cordova plugins add org.apache.cordova.statusbar

2、在app.js中，在deviceready處理器的頂部增加以下代碼：

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

3、再次建立應用程序，并在iOS模擬器或者iOS設備上測試你的應用程序。