Apache Cordova 使用Handlebars模板

使用 Handlebars 模板

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

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

步驟1：定義模板

根據(jù)如下步驟修改index.html：

1、增加一個(gè)腳本標(biāo)簽以包含handlebars.js庫(kù)：

<script src="https://atts.w3cschool.cn/attachments/image/wk/apachecordovatutorial/handlebars.js"></script>

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

Ratchet 是一個(gè)簡(jiǎn)單的CSS工具包，可以為移動(dòng)應(yīng)用程序提供樣式。

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

3、創(chuàng)建一個(gè)HTML模板以渲染Home View。在主體標(biāo)簽的第一子標(biāo)簽增加本腳本標(biāo)簽：

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)建一個(gè)HTML模板以渲染員工列表。在上一個(gè)之后立即增加本腳本標(biāo)簽：

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 變量聲明以前，立即聲明兩個(gè)變量，這兩個(gè)變量持有上述定義模板的編譯版本：

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

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

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

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

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

4、測(cè)試應(yīng)用程序。

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

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

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

cordova plugins add org.apache.cordova.statusbar

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

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

3、再次建立應(yīng)用程序，并在iOS模擬器或者iOS設(shè)備上測(cè)試你的應(yīng)用程序。