Apache Cordova 創(chuàng)建視圖

創(chuàng)建視圖

是時(shí)候提供帶有一些結(jié)構(gòu)的應(yīng)用程序了。如果我們繼續(xù)將應(yīng)用程序的所有核心功能添加到引導(dǎo)應(yīng)用程序的即時(shí)函數(shù)，那么它將很快變得難以控制。在本部分，我們創(chuàng)建一個(gè)HomeView對象，其封裝邏輯以創(chuàng)建和渲染Home視圖。

步驟1：創(chuàng)建Home View

1、在js目錄創(chuàng)建一個(gè)命名為HomeView.js的文件，并定義一個(gè)HomeView構(gòu)造函數(shù)執(zhí)行如下：

var HomeView = function (service) {  }

構(gòu)造函數(shù)將雇員數(shù)據(jù)服務(wù)作為一個(gè)參數(shù)

2、HomeView使用一個(gè)嵌套視圖來顯示員工列表。定義員工的列表作為單獨(dú)視圖，使它在其他情況下可重復(fù)使用。我們將在下面的步驟2定義EmployeeListView?，F(xiàn)在，頂一個(gè)本地變量以繼續(xù)跟蹤嵌套視圖。

var HomeView = function (service) {  var employeeListView;  }

3、在HomeView構(gòu)造函數(shù)內(nèi)定義一個(gè)initialize()函數(shù)。

• 為視圖定義一個(gè)div封裝。該div封裝用于附加視圖相關(guān)事件。

• 實(shí)例化嵌套視圖（你將在步驟2定義EmployeeListView）.

• 最后，在HomeView構(gòu)造函數(shù)中調(diào)用initialize()函數(shù)。

var HomeView = function (service) {

    var employeeListView;

    this.initialize = function () {
        // Define a div wrapper for the view (used to attach events)
        this.$el = $('<div/>');
        this.$el.on('keyup', '.search-key', this.findByName);
        employeeListView = new EmployeeListView();
        this.render();
    };

    this.initialize();

}

4、從app.js移動(dòng)renderHomeView()函數(shù)到HomeView類。為了保持視圖的可重用性，附加HTML到div封裝（this.el）代替文檔主體?，F(xiàn)在由于該函數(shù)被封裝在HomeView中，你也可以從renderHomeView()到render()重新命名它。

this.render = function() {
    this.$el.html(this.template());
    $('.content', this.$el).html(employeeListView.$el);
    return this;
};

5、從app.js移動(dòng)findByName()函數(shù)到HomeView，并將調(diào)整其與嵌套視圖一同工作。

this.findByName = function() {
    service.findByName($('.search-key').val()).done(function(employees) {
        employeeListView.setEmployees(employees);
    });
};

步驟2：創(chuàng)建EmployeeList視圖

1、在js目錄創(chuàng)建一個(gè)命名為EnployeeListView.js的文件。

2、執(zhí)行EmployeeListView如下：

var EmployeeListView = function () {

    var employees;

    this.initialize = function() {
        this.$el = $('<div/>');
        this.render();
    };

    this.setEmployees = function(list) {
        employees = list;
        this.render();
    }

    this.render = function() {
        this.$el.html(this.template(employees));
        return this;
    };

    this.initialize();

}

步驟3：使用Home View

1、在index.html中，增加腳本標(biāo)簽以包含EmployeeListView.js 和 HomeView.js（僅在app.js的腳本標(biāo)簽之前）：

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

2、在app.js中，移除renderHomeView()函數(shù)。

3、移除findByName()函數(shù)。

4、修改模板初始化。不是將它們聲明為局部變量，而是增加它們到它們各自類的原型：

HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
EmployeeListView.prototype.template = 
            Handlebars.compile($("#employee-list-tpl").html());

5、當(dāng)服務(wù)已經(jīng)成功初始化后，修改服務(wù)初始化邏輯以顯示Home View。將服務(wù)傳遞給主視圖構(gòu)造函數(shù)。

service.initialize().done(function () {
    $('body').html(new HomeView(service).render().$el);
});

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