什么是URL路由?
URL路由就是当点击一个链接,当前页面并不发生跳转,但页面的内容发生变化。当这发生时,通常会在当前URL后面附上一个"hash",也就是"#",这样用户就可以直接导航到他们需要的内容,如同使用浏览器的前进和后退按钮。URL路由几乎是任何单页应用程序的基础。Sammy.js是完成这个功能非常简单的库,这篇文章的后面会提供一个Sammy.js如何使用的简单例子。
优点
快。用户不需要等待页面的加载,如同本地应用程序。
缺点
不利于搜索引擎索引内容,不过,如果你对此感兴趣,总是会有办法的。
使用Sammy.js 和 Knockout.js的URL路由例子
我发现URL路由最简单的方式是使用sammy.js和knockout.js。下面开始设置knockout视图模型,然后初始化sammy.js:
function viewModel() {
var self = this;
self.currentView = ko.observable();
self.views = ko.observableArray(["Home", "About", "Contact"]);
}
var vm = new viewModel();
ko.applyBindings(vm);
Sammy(function () {
/*
**"#:view"的意思是sammy获取hash tag(#)后面的任何内容并将它应用为"this.params.view"的值
*/
this.get('#:view', function () {
//Set currentView on your view model
vm.currentView(this.params.view);
});
}).run('#Home');//指定程序的开始页面或留空
在下面的HTML代码段中,我有一个knockout模板和设置为currentView的name绑定。对于每一个视图,我有一个带有模板id匹配视图名称的单独模板。导航条使用twitter bootstrap,当"currentView"的值等于每个按钮引用的视图时应用css 类 "active".
<ul class="nav nav-pills" data-bind="foreach:views">
<li data-bind="css: {active: $root.currentView() == $data}">
<a data-bind="text:$data, attr:{href:'#' + $data}"></a>
</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div data-bind="template: {name: currentView()}"></div>
</div>
</div>
</div>
<script type="text/html" id="Home">
<div>
<h2>Home</h2>
</div>
</script>
<script type="text/html" id="About">
<div>
<h2>About</h2>
</div>
</script>
<script type="text/html" id="Contact">
<div>
<h2>Contact</h2>
</div>
</script>
下面是在jsFiddle中的例子:
原文链接:http://www.softfinity.com/blog/an-simple-introduction-to-url-routing/