pushState in backbone.js

Question

Я пытаюсь заставить pushState работать в моем базовом приложении. Он отлично работает, просто щелкнув ссылку. Но если я обновить страницу, я получаю 404.

Router

Router = Backbone.Router.extend({ 
    routes: { 
     'home': 'home' 

    }, 

    home: function() { 
     new HomeView({el:'#main-view'}) 
    } 
}); 

Когда тег получает щелкнул: история

event.preventDefault(); 
App.navigate(event.target.pathname, { trigger: true }); 

старт:

Backbone.history.start({pushState:true}); 

и HTML:

   <li> 
        <a href="/home">home</a> 
       </li> 

Неправильный телефон?

Answer 1

Проблема заключается в использовании реальный HTML ссылка, поэтому обновляет страницу, это нормальное поведение. Но вы хотите изменить только текущий маршрут, а не перезагружать страницу.

Для этого вы можете обращаться с ссылками, чтобы сказать «Магистраль»: «обрабатывайте мои ссылки!».

Вот пример JS, который я использую для обработки ссылок, которые имеют «внутренний» CSS-класс в качестве маршрута.

'use strict'; 
var Backbone = require('backbone'); 
var $ = require('jquery'); 
Backbone.$ = $; 

module.exports = function() { 
    // Use absolute URLs to navigate to anything not in your Router. 

    var openLinkInTab = false; 

    // Only need this for pushState enabled browsers 
    if (Backbone.history._hasPushState) { 


    // console.log('YES you have push state !'); 

    $(document).keydown(function(event) { 
     if (event.ctrlKey || event.keyCode === 91) { 
     openLinkInTab = true; 
     } 
    }); 

    $(document).keyup(function() { 
     openLinkInTab = false; 
    }); 

    // Use delegation to avoid initial DOM selection and allow all matching elements to bubble 
    $(document).on('click', 'a.innerlink', function(evt) { 
     // Get the anchor href and protcol 
     var href = $(this).attr('href'); 
     var protocol = this.protocol + '//'; 

     console.log('backbone_pushstate_router:', href, protocol); 

     evt.preventDefault(); 

     // Ensure the protocol is not part of URL, meaning its relative. 
     // Stop the event bubbling to ensure the link will not cause a page refresh. 
     if (!openLinkInTab && href.slice(protocol.length) !== protocol) { 
     evt.preventDefault(); 

     // Note by using Backbone.history.navigate, router events will not be 
     // triggered. If this is a problem, change this to navigate on your 
     // router. 
     Backbone.history.navigate(href, true); 
     } 
    }); 
    } else { 
    console.warn('no push state'); 
    } 
}; 

Наслаждайтесь :)