Backbone入门基础 - 路由

理解路由

• url和处理程序的映射
• 应用程序管理器

<div id="page1">
    <h1>page1</h1>
</div>
<div id="page2">
    <h1>page2</h1>
</div>

var AppRouter =Backbone.Router.extend({
    initialize: function(){
        $('#page1').hide();
        $('#page2').hide();
    },
    routes:{
        'page1':'showPage1',
        'page2':'showPage2'
    },
    showPage1: function(){
        $('#page1').show();
        $('#page2').hide();
    },
    showPage2: function(){
        $('#page2').show();
        $('#page1').hide();
    }
});
var app = new AppRouter();
Backbone.history.start();

历史管理

[1] pushState

• 服务器固定返回某个页面，针对不同url

Backbone.history.start({pushState:true,root:'backbone'});

本地webserver虚拟路径 localhost/backbone/page1 可访问

1）a标签导航：直接指定path，不需要前导#，会刷新

<div id="page1">
    <h1>page1</h1>
    <a href="page2">跳转到第2页</a>
</div>

2）Router.navigate导航，不会刷新

<div id="page2">
    <h1>page2</h1>
    <a href="#" id="gotoPage1">跳转到第1页</a>
</div>

$('#gotoPage1').click(function(e){
    e.preventDefault();
    app.navigate('page1',{trigger:true});
});

[2] hash#

1）a标签导航：前导#，不会刷新

会切换hash，http://localhost:8080/backbone/router.html#page1

<div id="page1">
    <h1>page1</h1>
    <a href="#page2">跳转到第2页</a>
</div>
<div id="page2">
    <h1>page2</h1>
    <a href="#page1" >跳转到第1页</a>
</div>

2）Router.navigate导航，不需要前导#，url会自动添加#，不会刷新

略，与pushState中Router.navigate导航例子相同。