Apache Cordova 設(shè)置單頁應(yīng)用程序

設(shè)置單頁應(yīng)用程序

“單頁應(yīng)用程序”是一個(gè)網(wǎng)頁應(yīng)用程序，存在于單個(gè)HTML頁面中。根據(jù)用戶使用該應(yīng)用程序的導(dǎo)航需要，已在應(yīng)用程序中增加“views”，并從DOM中移除。一個(gè)單頁應(yīng)用程序的布局是尤其適合于移動(dòng)應(yīng)用程序的：

• 沒有刷新頁面提供了一個(gè)更流暢和更接近于本地化的體驗(yàn)。

• 用戶界面是完全在客戶端創(chuàng)建的，而不依賴于服務(wù)器創(chuàng)建用戶界面，使其成為脫機(jī)工作應(yīng)用程序的理想架構(gòu)。

在本單元中，我們?cè)O(shè)置基本的下部構(gòu)造將員工目錄轉(zhuǎn)為單頁應(yīng)用程序。

步驟

1、在index.html中：在主體標(biāo)簽內(nèi)刪除HTML標(biāo)記（伴隨有腳本標(biāo)簽異常）。

2、將立即執(zhí)行函數(shù)添加到app.js內(nèi)，定義一個(gè)命名為renderHomeView()的函數(shù)（剛好在findByName函數(shù)之后）。執(zhí)行函數(shù)以編程方式增加Home View標(biāo)記到主體元素。

function renderHomeView() {
    var html =
      "<h1>Directory</h1>" +
      "<input class='search-key' type='search' placeholder='Enter name'/>" +
      "<ul class='employee-list'></ul>";
    $('body').html(html);
    $('.search-key').on('keyup', findByName);
}

3、修改數(shù)據(jù)服務(wù)的初始化邏輯：當(dāng)服務(wù)已經(jīng)成功地初始化后，調(diào)用renderHomeView()函數(shù)以程序化顯示Home View。

var service = new EmployeeService();
service.initialize().done(function () {
    renderHomeView();
});

4、由于你已經(jīng)移動(dòng)注冊(cè)的KeyUp事件到renderHomeView()函數(shù)中，確保你在事件注冊(cè)（Event Registration）部分移除原來的事件注冊(cè)。

5、由于Help按鈕已不在該位置，對(duì)Help按鈕移除點(diǎn)擊事件處理器（在10:27注冊(cè)部分）。

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

確保你沒有忽略上述第4和第5步，否則你可能運(yùn)行到難以跟蹤的問題，這與本教程中后續(xù)講解的事件觸發(fā)兩次有關(guān)。