URL路由简介

什么是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/

分享到: 更多

发表评论