2012-02-17 2 views
37

Если я разрешаю pushState в базовом маршрутизаторе, мне нужно использовать return false во всех ссылках или делать это автоматически? Есть ли какие-либо образцы, как часть html, так и часть скрипта.Backbone.js и pushState

ответ

67

Это картина Тима Branyen использует в своей boilerplate:

initializeRouter: function() { 
    Backbone.history.start({ pushState: true }); 
    $(document).on('click', 'a:not([data-bypass])', function (evt) { 

    var href = $(this).attr('href'); 
    var protocol = this.protocol + '//'; 

    if (href.slice(protocol.length) !== protocol) { 
     evt.preventDefault(); 
     app.router.navigate(href, true); 
    } 
    }); 
} 

Используя это, а не по отдельности делать preventDefault на ссылки, вы позволяете маршрутизатор обрабатывать их по умолчанию и делать исключения при наличии атрибута data-bypass. По моему опыту он хорошо работает как образец. Я не знаю каких-либо замечательных примеров, но попробовать себя не должно быть слишком сложно. красота магистральная заключается в ее простоте;)

+0

Удивительный, он отлично работает. Благодаря! – Marcus

+4

Просто голова - я заметил, что IE7 вернул абсолютный URL-адрес в некоторых случаях, когда ожидал относительный URL-адрес. Чтобы обработать этот случай, вы хотите нормализовать значение 'href' как относительного пути до вызова навигации. – lupefiasco

+1

Просто любопытно, что такое (href.slice (протокол.length)! == протокол)? – dezman

9
$(document.body).on('click', 'a', function(e){ 
    e.preventDefault(); 
    Backbone.history.navigate(e.currentTarget.pathname, {trigger: true}); 
}); 
1

match() или startsWith() (ES 6) также может быть использована для проверки протокола. Если вы хотите поддерживать абсолютные URL-адреса по свойству pathname, проверьте базовые URL-адреса на location.origin.

function(evt) { 
    var target = evt.currentTarget; 
    var href = target.getAttribute('href'); 

    if (!href.match(/^https?:\/\//)) { 
    Backbone.history.navigate(href, true); 
    evt.preventDefault(); 
    } 
    // or 

    var protocol = target.protocol; 

    if (!href.startsWith(protocol)) { 
    // ... 
    } 
    // or 

    // http://stackoverflow.com/a/25495161/531320 
    if (!window.location.origin) { 
    window.location.origin = window.location.protocol 
    + "//" + window.location.hostname 
    + (window.location.port ? ':' + window.location.port: ''); 
    } 

    var absolute_url = target.href; 
    var base_url = location.origin; 
    var pathname = target.pathname; 

    if (absolute_url.startsWith(base_url)) { 
    Backbone.history.navigate(pathname, true); 
    evt.preventDefault(); 
    } 
} 
0

Вы можете предотвратить поведение по умолчанию нажмите на <a> тегов в HTML. Просто добавьте ниже код внутри тега <script />.

<script> 
$(document).on("click", "a", function(e) 
{ 
    e.preventDefault(); 
    var href = $(e.currentTarget).attr('href'); 
    router.navigate(href, true);router 
}); 
</script> 
Смежные вопросы