Backbone.js PushState True

Question

Я создал сайт в позвоночнике и по разным причинам решил, что хочу удалить хэш в URL-адресе. Я изменил history.start от

Backbone.history.start(); 

в

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

но когда я делаю, что маршрутизация перестает работать правильно.

Моя маршрутизация выглядит следующим образом:

var Router = Backbone.Router.extend({ 
    routes: { 
    "": "home", 
    "home": "home", 
    "artists": "artists", 
    } 
}); 

var router = new Router; 
router.on('route:home', function() { 
    console.log("home"); 
    // Code 
}); 

router.on('route:artists', function() { 
    console.log("artists"); 
    // Code 
}); 

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

если я запускаю его без PushState он отлично работает, если я запустить его с PushState он не достигает console.log("artists"); части, и я не понимаю, почему, может кто-то объясняет мне, что я делаю неправильно?

Answer 1

Вам необходимо предотвратить элемент a, чтобы продолжить его регулярное действие, и проложите его магистральный маршрутизатор.

Я напишу пример, используя JQuery, чтобы очертить, что должно произойти:

$(document).on("click", "a", function(e) 
{ 
    e.preventDefault(); // This is important 

    var href = $(e.currentTarget).attr('href'); 

    router.navigate(href, true); // <- this part will pass the path to your router 

}); 

Answer 2

Теперь я понимаю, почему нужно глобально переопределить поведение тега не в документации. Я думаю, что мы намерены использовать ручку навигацию в наших представлениях, как так:

MyView = Backbone.View.extend({ 
    events: { 
    "click a.foo": "foo" 
    }, 

    foo: function(e){ 
    e.preventDefault(); 
    history.navigate("foo"); 
    $("#output").append("foo"); 
    } 
}); 

Однако, если мы хотим сохранить возможность использовать простой HREFs в наших тегах мы должны перехватить поведение щелчка, как описаны выше.

Если у вас есть гибридное приложение, некоторые ссылки на внутреннюю основу и некоторые из них заставляют обновлять страницу, не обязательно предотвращатьDefault() для каждой ссылки. Ссылки на другие части приложения будут нарушены.

Можно использовать вариант вышеизложенного и воспользоваться тем фактом, что если нет внутреннего вида для навигации, Backbone.history.navigate() вернет false.

$(document).on("click", "a", function(e) 
{ 

    var href = $(e.currentTarget).attr('href'); 

    var res = Backbone.history.navigate(href,true); 
    //if we have an internal route don't call the server 
    if(res) 
     e.preventDefault(); 

});