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

步骤1：创建Home View

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

var HomeView = function (service) {  }

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

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

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

• 为视图定义一个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();

}

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

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

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="js/EmployeeListView.js"></script>
<script src="js/HomeView.js"></script>

3、移除findByName()函数。

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

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

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