Backbone.js路由导航 #

var router = new AppRouter();

router.navigate('users', { trigger: true });

router.navigate('users/1', { trigger: true });

router.navigate('users', {
    trigger: true,
    replace: true
});

router.navigate('about');

router.navigate('about', { trigger: true });

router.navigate('login', { replace: true });

router.navigate('dashboard', { trigger: true, replace: true });

var result = router.navigate('users', { trigger: true });
console.log(result === router);

<a href="#users">用户列表</a>
<a href="#users/1">用户详情</a>
<a href="#about">关于</a>

$(document).on('click', 'a[href^="#"]', function(e) {
    e.preventDefault();
    var href = $(this).attr('href').substring(1);
    router.navigate(href, { trigger: true });
});

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

$(document).on('click', 'a[href^="/app/"]', function(e) {
    e.preventDefault();
    var href = $(this).attr('href').replace('/app/', '');
    router.navigate(href, { trigger: true });
});

$(document).on('click', 'a', function(e) {
    var $link = $(this);
    var href = $link.attr('href');
    
    if (href.indexOf('://') !== -1 || href.indexOf('mailto:') === 0) {
        return;
    }
    
    if (href.indexOf('/app/') === 0) {
        e.preventDefault();
        router.navigate(href.replace('/app/', ''), { trigger: true });
    }
});

<button data-route="users">用户列表</button>
<button data-route="users/1">用户详情</button>

$(document).on('click', '[data-route]', function(e) {
    e.preventDefault();
    var route = $(this).data('route');
    router.navigate(route, { trigger: true });
});

window.history.back();

window.history.go(-1);

window.history.forward();

window.history.go(1);

var fragment = Backbone.history.getFragment();
console.log(fragment);

var AppRouter = Backbone.Router.extend({
    routes: {
        'users': 'users',
        'posts': 'posts'
    },
    
    isCurrentRoute: function(route) {
        return Backbone.history.getFragment() === route;
    },
    
    users: function() {
        if (this.isCurrentRoute('users')) {
            console.log('当前是用户页面');
        }
    }
});

var AppRouter = Backbone.Router.extend({
    navigate: function(fragment, options) {
        if (this.hasUnsavedChanges()) {
            if (confirm('有未保存的更改，确定要离开吗？')) {
                return Backbone.Router.prototype.navigate.call(this, fragment, options);
            }
            return this;
        }
        return Backbone.Router.prototype.navigate.call(this, fragment, options);
    },
    
    hasUnsavedChanges: function() {
        return this.currentView && this.currentView.hasChanges;
    }
});

router.on('route', function(name, args) {
    console.log('路由名称:', name);
    console.log('路由参数:', args);
});

router.on('route:users', function() {
    console.log('进入用户页面');
});

router.on('route:userDetail', function(id) {
    console.log('进入用户详情:', id);
});

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        this.on('route', this.onRouteChange, this);
    },
    
    onRouteChange: function(name, args) {
        this.updateNavigation(name);
        this.trackPageView(name);
    },
    
    updateNavigation: function(route) {
        $('.nav-item').removeClass('active');
        $('.nav-item[data-route="' + route + '"]').addClass('active');
    },
    
    trackPageView: function(route) {
        if (window.ga) {
            ga('send', 'pageview', '/' + route);
        }
    }
});

var NavigationService = {
    router: null,
    
    init: function(router) {
        this.router = router;
    },
    
    go: function(route, options) {
        options = options || {};
        this.router.navigate(route, {
            trigger: options.trigger !== false,
            replace: options.replace || false
        });
    },
    
    goBack: function() {
        window.history.back();
    },
    
    goForward: function() {
        window.history.forward();
    },
    
    replace: function(route) {
        this.go(route, { replace: true });
    },
    
    getCurrentRoute: function() {
        return Backbone.history.getFragment();
    },
    
    isActive: function(route) {
        return this.getCurrentRoute() === route;
    }
};

NavigationService.init(router);

NavigationService.go('users');
NavigationService.goBack();

var BreadcrumbService = {
    breadcrumbs: [],
    
    add: function(name, route) {
        this.breadcrumbs.push({ name: name, route: route });
        this.render();
    },
    
    set: function(items) {
        this.breadcrumbs = items;
        this.render();
    },
    
    clear: function() {
        this.breadcrumbs = [];
        this.render();
    },
    
    render: function() {
        var $breadcrumb = $('#breadcrumb');
        $breadcrumb.empty();
        
        this.breadcrumbs.forEach(function(item, index) {
            if (index < this.breadcrumbs.length - 1) {
                $breadcrumb.append(
                    '<li><a href="#' + item.route + '">' + item.name + '</a></li>'
                );
            } else {
                $breadcrumb.append(
                    '<li class="active">' + item.name + '</li>'
                );
            }
        }, this);
    }
};

var AppRouter = Backbone.Router.extend({
    routes: {
        'users': 'users',
        'users/:id': 'userDetail'
    },
    
    users: function() {
        BreadcrumbService.set([
            { name: '首页', route: '' },
            { name: '用户列表', route: 'users' }
        ]);
    },
    
    userDetail: function(id) {
        BreadcrumbService.set([
            { name: '首页', route: '' },
            { name: '用户列表', route: 'users' },
            { name: '用户详情', route: 'users/' + id }
        ]);
    }
});

var NavigationHistory = {
    history: [],
    maxLength: 20,
    
    add: function(route) {
        this.history.push({
            route: route,
            timestamp: Date.now()
        });
        
        if (this.history.length > this.maxLength) {
            this.history.shift();
        }
    },
    
    getLast: function() {
        return this.history[this.history.length - 1];
    },
    
    getPrevious: function() {
        return this.history[this.history.length - 2];
    },
    
    getAll: function() {
        return this.history;
    }
};

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        this.on('route', function(name) {
            NavigationHistory.add(Backbone.history.getFragment());
        });
    }
});

var TitleService = {
    baseTitle: 'My App',
    
    set: function(title) {
        if (title) {
            document.title = title + ' - ' + this.baseTitle;
        } else {
            document.title = this.baseTitle;
        }
    }
};

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'users': 'users',
        'users/:id': 'userDetail'
    },
    
    home: function() {
        TitleService.set();
    },
    
    users: function() {
        TitleService.set('用户列表');
    },
    
    userDetail: function(id) {
        var user = new User({ id: id });
        user.fetch().then(function() {
            TitleService.set(user.get('name'));
        });
    }
});