Épine.js et pushState
Si j'active pushState dans le routeur backbone, dois-je utiliser return false sur tous les liens ou backbone gère-t-il cela automatiquement? Y a-t-il des exemples, à la fois la partie html et la partie script.
4 réponses
C'est le modèle de Tim Branyen utilise dans son réutilisable:
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);
}
});
}
En utilisant cela, plutôt que de faire individuellement preventDefault sur les liens, vous laissez le routeur les gérer par défaut et faire des exceptions en ayant un attribut data-bypass. Dans mon expérience, cela fonctionne bien comme un modèle. Je ne connais pas de grands exemples, mais l'essayer vous-même ne devrait pas être trop difficile. La beauté de Backbone réside dans sa simplicité;)
$(document.body).on('click', 'a', function(e){
e.preventDefault();
Backbone.history.navigate(e.currentTarget.pathname, {trigger: true});
});
match() ou startsWith() (ES 6) peut également être utilisé pour vérifier le protocole. Si vous souhaitez prendre en charge les URL absolues par la propriété pathname, vérifiez les URL de base par 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();
}
}
Vous pouvez empêcher le comportement par défaut de cliquer sur les balises <a> en html. Ajoutez simplement le code ci-dessous dans la balise <script />.
<script>
$(document).on("click", "a", function(e)
{
e.preventDefault();
var href = $(e.currentTarget).attr('href');
router.navigate(href, true);router
});
</script>