四、使用 URL 路由
在这一章中，我将向你展示如何在你的 web 应用中添加另一个服务器端的概念:URL 路由。URL 路由背后的想法非常简单:我们将 JavaScript 函数与内部的 T2 URL 联系起来。内部 URL 是相对于当前文档的 URL，包含一个散列片段。事实上，它们通常只表示为散列片段本身，比如#summary。
在正常情况下，当用户点击一个指向内部 URL 的链接时，浏览器会查看文档中是否有一个元素的id属性值与片段相匹配，如果有，就滚动以使该元素可见。
当我们使用 URL 路由时，我们通过执行 JavaScript 函数来响应这些导航变化。这些函数可以显示和隐藏元素，更改视图模型，或者执行应用中可能需要的其他任务。使用这种方法，我们可以为用户提供一种在应用中导航的机制。
当然，我们可以使用事件。问题还是在于规模。对于小型简单的 web 应用来说，处理由元素触发的事件是一种完全可行且可接受的方法。对于更大、更复杂的应用，我们需要更好的东西，URL 路由提供了一种简单、优雅、可伸缩的好方法。当我们使用 URL 作为导航机制时，向 web 应用添加新的功能区域，并为用户提供使用它们的方法，变得非常简单和健壮。
构建一个简单的路由 Web 应用
解释 URL 路由的最好方式是用一个简单的例子。清单 4-1 显示了一个依赖于路由的基本 web 应用。
清单 4-1。一个简单的路由 Web 应用
<!DOCTYPE html>
<html>
<head>
<title>Routing Example</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
<script src='knockout-2.0.0.js' type='text/javascript'></script>
<script src='utils.js' type='text/javascript'></script> `
var viewModel = {
items: ["Apple", "Orange", "Banana"],
selectedItem: ko.observable("Apple")
};
$(document).ready(function() { ko.applyBindings(viewModel);
$('div.catSelectors').buttonset();
hasher.initialized.add(crossroads.parse, crossroads); hasher.changed.add(crossroads.parse, crossroads); hasher.init();
crossroads.addRoute("select/Apple", function() { viewModel.selectedItem("Apple"); }); crossroads.addRoute("select/Orange", function() { viewModel.selectedItem("Orange"); }); crossroads.addRoute("select/Banana", function() { viewModel.selectedItem("Banana"); }); });
版权属于：月萌API www.moonapi.com，转载请注明出处
