Empêcher le rechargement complet de la page sur Backbone pushState

Je suis en train de prévenir pleine page est rechargée à l'aide de la Dorsale du pushState. Quand je l'appelle naviguer() de mon point de vue, je vois les messages marqués //1 ci-dessous, mais ce n'est pas //2. De plus, lorsque j'essaie d'ouvrir le même onglet, la page se recharge à nouveau.

Dois-je arrêter de l'événement lui-même? J'ai essayé à l'aide de jQuery preventDefault(), qui empêche le rechargement de la page, mais je n'ai pas vu ce document n'importe où.

Ci-dessous mon code actuel:

App.Router = Backbone.Router.extend({
routes:{
"analytics":"analytics"
, "realtime":"realtime"
}
, analytics:function(page) {
console.log("analytics route hit: %o", page); //2
}
, realtime:function(page) {
console.log("realtime route hit: %o", page); //2
}
});
App.TabSetView = Backbone.View.extend({
initialize:function() {
this.collection.bind("reset", this.render, this);
this.collection.bind("add", this.render, this);
this.collection.bind("change", this.render, this);
this.collection.bind("remove", this.render, this);
}
, events:{
'click li.realtime a':  "onRealtime"
, 'click li.analytics a': "onAnalytics"
}
, render:function() {
//omitted for brevity
}
, onAnalytics:function() {
console.log("onAnalytics"); //1
if (this.collection.activateAnalytics()) {
App.app.navigate("analytics", true);
this.render();
console.log("navigated");
} else {
console.log("do nothing"); //1
}
}
, onRealtime:function() {
console.log("onRealtime");
if (this.collection.activateRealtime()) {
App.app.navigate("realtime", true);
this.render();
console.log("navigated");
} else {
console.log("do nothing"); //1
}
}
});
var tabs = ...; //omitted for brevity
var tabSetView = new App.TabSetView({collection: tabs});
var App.app = new App.Router;
Backbone.history.start({pushState:true});

source d'informationauteur François Beausoleil

  1. 19

    pour arrêter le rechargement de la page lorsqu'un utilisateur clique sur un lien, vous devez appeler e.preventDefault() comme vous disiez.

    
MyView = Backbone.View.extend({
events: {
"click .some a": "clicked"
},
clicked: function(e){
e.preventDefault();
//do your stuff here
}
});

    vous êtes également à bon droit que ce n'est pas documentée dans la colonne vertébrale docs. les événements sont gérés par jQuery. donc on peut penser que pour être valable, toute jQuery choses que vous feriez - comme ont une e paramètre à un rappel d'événement - travaillera avec épine dorsale du events.

    que pour cela:

    en plus, lorsque j'essaie d'ouvrir le même onglet, la page se recharge à nouveau.

    vous dites que lorsqu'un utilisateur ouvre un nouvel onglet dans le navigateur à l'url de votre site? si oui, alors il n'y a rien que vous pouvez faire à ce sujet. lorsque le navigateur s'ouvre l'onglet il en fait la demande au serveur pour charger la page.

    si vous faites allusion à une "onglet" dans le cadre de votre site de l'interface utilisateur, cependant, l'utilisation de e.preventDefault() sur votre lien /"onglet" clics devrait prendre soin de cela.

  2. 19

    La réponse est en fait ici https://stackoverflow.com/a/9331734/985383si vous activez pushState vous voulez des liens de travail et les empêche pas, comme suggéré ci-dessus, ou bien, n'est pas juste de les prévenir. ici, il est:

    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);
}
});
}
  3. 5
     $('a').click(function(e){
e.preventDefault();
Backbone.history.navigate(e.target.pathname, {trigger: true});
});
  4. 2

    Juste un suivi de Derick réponse.
    Il a travaillé pour moi, mais pour le garder propre, je écrasait la colonne vertébrale.Vue de classe:

    (coffeescript)

    class NewBackboneView extends Backbone.View
events:
'click a' : 'pushstateClick'
pushstateClick: (event) ->
event.preventDefault()
Backbone.View = NewBackboneView

    De sorte que chaque lien de mon épine dorsale points de vue ont le prévenir par défaut.

  5. 0

    Il dépend de comment vous avez généré les balises HTML. On dirait que vous êtes à l'aide de balises d'ancrage (<a>), donc si ceux balise d'ancrage href ont des valeurs ou même une chaîne vide, alors vous devez annuler le comportement par défaut du navigateur sinon vous obtiendrez un rechargement de la page. Vous pouvez annuler le comportement par défaut à l'aide de jQuery êtes événement.preventDefault() comme vous l'avez mentionné. Alternativement, si vous n'êtes pas préoccupé par l'amélioration progressive, ou SEO, alors vous pouvez définir votre balise d'ancrage href # ou javascript:void(0);, ce qui permettra également d'éviter à la page de rechargement. par exemple,

    <a href="#">Click me</a>

    ou

    <a href="javascript:void(0);">Click me</a>