Apache Cordova 创建视图

创建视图

是时候提供带有一些结构的应用程序了。如果我们继续将应用程序的所有核心功能添加到引导应用程序的即时函数，那么它将很快变得难以控制。在本部分，我们创建一个HomeView对象，其封装逻辑以创建和渲染Home视图。

步骤1：创建Home View

1、在js目录创建一个命名为HomeView.js的文件，并定义一个HomeView构造函数执行如下：

var HomeView = function (service) {  }

构造函数将雇员数据服务作为一个参数

2、HomeView使用一个嵌套视图来显示员工列表。定义员工的列表作为单独视图，使它在其他情况下可重复使用。我们将在下面的步骤2定义EmployeeListView。现在，顶一个本地变量以继续跟踪嵌套视图。

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

3、在HomeView构造函数内定义一个initialize()函数。

• 为视图定义一个div封装。该div封装用于附加视图相关事件。

• 实例化嵌套视图（你将在步骤2定义EmployeeListView）.

• 最后，在HomeView构造函数中调用initialize()函数。

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移动renderHomeView()函数到HomeView类。为了保持视图的可重用性，附加HTML到div封装（this.el）代替文档主体。现在由于该函数被封装在HomeView中，你也可以从renderHomeView()到render()重新命名它。

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

5、从app.js移动findByName()函数到HomeView，并将调整其与嵌套视图一同工作。

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

步骤2：创建EmployeeList视图

1、在js目录创建一个命名为EnployeeListView.js的文件。

2、执行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中，增加脚本标签以包含EmployeeListView.js 和 HomeView.js（仅在app.js的脚本标签之前）：

<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()函数。

3、移除findByName()函数。

4、修改模板初始化。不是将它们声明为局部变量，而是增加它们到它们各自类的原型：

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

5、当服务已经成功初始化后，修改服务初始化逻辑以显示Home View。将服务传递给主视图构造函数。

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

6、测试应用程序。