Via 由 [ ] 提供

设置单页应用程序

“单页应用程序”是一个网页应用程序,存在于单个HTML页面中。根据用户使用该应用程序的导航需要,已在应用程序中增加“views”,并从DOM中移除。一个单页应用程序的布局是尤其适合于移动应用程序的:

  • 没有刷新页面提供了一个更流畅和更接近于本地化的体验。

  • 用户界面是完全在客户端创建的,而不依赖于服务器创建用户界面,使其成为脱机工作应用程序的理想架构。

在本单元中,我们设置基本的下部构造将员工目录转为单页应用程序。

步骤

1、在index.html中:在主体标签内删除HTML标记(伴随有脚本标签异常)。

2、将立即执行函数添加到app.js内,定义一个命名为renderHomeView()的函数(刚好在findByName函数之后)。执行函数以编程方式增加Home View标记到主体元素。

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、修改数据服务的初始化逻辑:当服务已经成功地初始化后,调用renderHomeView()函数以程序化显示Home View。

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

4、由于你已经移动注册的KeyUp事件到renderHomeView()函数中,确保你在事件注册(Event Registration)部分移除原来的事件注册。

5、由于Help按钮已不在该位置,对Help按钮移除点击事件处理器(在10:27注册部分)。

6、测试应用程序。

确保你没有忽略上述第4和第5步,否则你可能运行到难以跟踪的问题,这与本教程中后续讲解的事件触发两次有关。