web-dev-qa-db-fra.com

Comment actualiser une page dans une application de réseau fédérateur

J'utilise l'épine dorsale pour créer mon application Web.

Actuellement, je suis confronté à un problème selon lequel si je suis sur la page d'accueil, je ne peux pas actualiser la même page en cliquant simplement sur le bouton "Accueil" à nouveau.

Je crois que c'est la limitation fournie par le backbone (ne recharge pas la page si la même URL est appelée)

enter image description here

Y a-t-il un moyen de contourner cela? Pour que je puisse déclencher un rechargement de page lorsque je clique à nouveau sur le bouton d'accueil, c'est-à-dire que je rappelle la même URL?

javascriptbackbone.jspage-refresh
28
Zhen

En regardant la source backbone.js, il semble que ce ne soit pas possible par défaut, car il ne répond qu'à un changement d'URL. Et puisque vous cliquez sur le même lien, vous ne déclencheriez pas d'événement de modification.

Code dans Backbone.

$(window).bind('hashchange', this.checkUrl);

Vous devrez gérer vous-même un non-changement. Voici ce que j'ai fait:

$('.nav-links').click(function(e) {
    var newFragment = Backbone.history.getFragment($(this).attr('href'));
    if (Backbone.history.fragment == newFragment) {
        // need to null out Backbone.history.fragement because 
        // navigate method will ignore when it is the same as newFragment
        Backbone.history.fragment = null;
        Backbone.history.navigate(newFragment, true);
    }
});
29
Thanh Nguyen

Vous cherchez Backbone.history.loadUrl. De la Source annotée :

Essayez de charger le fragment d'URL actuel. Si une route réussit avec une correspondance, retourne true. Si aucune route définie ne correspond au fragment, retourne false.

Ainsi, pour un lien d'actualisation simple, vous pouvez ajouter l'événement suivant à votre Backbone.View:

events: {
  'click a#refresh': function() {
    Backbone.history.loadUrl();
    return false;
  }
}
38
amiuhle

Dans le cas où vous souhaitez recharger la page entière avec la vue souhaitée. Cela pourrait faire senes pour le bouton d'accueil. L'avantage sera qu'il rafraîchira la mémoire.

Accédez à n'importe quel itinéraire sans le charger (sans le "vrai"), puis rechargez

Backbone.history.navigate('route/goes/here');
window.location.reload();
8
guya

Le backbone.history.loadUrl est la solution.

La fonction de gestion des clics de votre bouton Accueil (si la maison est la racine/de votre WebApp) doit être:

myAppRouter.navigate('');
Backbone.history.loadUrl();
6
Synn

J'avais besoin de "rafraîchir" ma page lors d'un événement de changement d'orientation car toutes mes requêtes multimédia CSS pour le mode portrait n'étaient pas exécutées correctement par défaut. C'est ce que j'ai fini par faire:

Backbone.history.fragment = null;
Backbone.history.navigate(document.location.hash, true);

Bien sûr, pour l'intégralité de cette réponse, cela a été enveloppé dans un code de gestion des changements d'orientation:

window.addEventListener('orientationchange', function () {
    Backbone.history.fragment = null;
    Backbone.history.navigate(document.location.hash, true); 
}, false);
2
Bas Slagter

Vous pouvez également apporter une modification dénuée de sens à l'URL en ajoutant un nombre aléatoire à la fin:

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000);
Backbone.history.navigate(url, true);

Ceci est particulièrement utile pour IE car il ne demandera pas de nouvelles données via un appel AJAX si l'url n'a pas changé).

1
user2498689

Afin de fournir un extrait de code réutilisable, j'ai augmenté le Backbone.View avec une méthode d'aide pour le réutiliser partout où nous devons recharger la même page malgré les limitations du routeur Backbone.

Dans notre fichier app.js ou tout autre endroit approprié

Backbone.View = Backbone.View.extend({
    refreshPage: function(e){
        if(e.target.pathname){
            Backbone.history.navigate(e.target.pathname);
        }
        window.location.reload();           
    }
});

De cette façon, si nous avons un lien tel que

<a href="/whatever" id="whateverId">Some text </a>

Dans notre vue, nous aurions juste besoin de lier l'événement click à ce rappel pour tirer parti de la fonctionnalité d'actualisation de la page, dans la mesure où l'aide refreshPage sera disponible via la chaîne de prototype

events: {
    'click #whateverId': 'refreshPage', 
}

Dans la mesure où nous n'avons pas besoin de changer la "balise", c'est une solution plus propre qui permettra d'économiser du codage standard

J'espère que cela aide

0
Jaime Agudo

La différence entre http://localhost.com/ et http://localhost.com/#!/ est que le second est un lien vers l'ancre, il ne le fait pas charger une page, il ne recherche que l'ancre dans la page en cours et y défile s'il est trouvé. Vous devez faire en sorte que votre lien ressemble au premier, pas de "#" à la fin.

0
clyfe

Voici mon approche préférée jusqu'à présent:

 if (!Backbone.history.navigate(urlPath, true)) {
      Backbone.history.loadUrl();
 }
0
Guy

Vous pouvez souvent modifier votre itinéraire pour inclure un splat, de sorte que vous pouvez ajouter une chaîne aléatoire à la fin d'un href pour le rendre unique, mais toujours correspondre à l'itinéraire "home". (Remarque: faites-en votre dernier itinéraire.)

Dans les itinéraires:

routes: {
    "*str": "home"
}

Dans la vue:

render: function() {
    var data = {href: +(new Date())};
    _.extend(data, this.model.attributes);
    this.$el.html(this.template(data));
    return this;
}

Dans le modèle (guidon montré ici):

<a href="{{href}}">Home Link</a>
0
Nate Barr

Cela fonctionne avec

 myBackboneRouter.navigate("users", {trigger: true})
0
sri_bb

Ce n'est pas jusqu'à l'épine dorsale. La même chose fonctionne bien dans Chrome (navigateurs webkit), mais pas dans Firefox. C'est un comportement de navigateur

0
RameshVel