Comment actualiser une page dans une application de base

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

Code dans Backbone.History:

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

Vous devrez gérer un non-changement vous-même. 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); } }); 

Vous recherchez Backbone.history.loadUrl . De la source annotée :

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

Ainsi, pour un simple lien de rafraîchissement, vous pouvez ajouter l'événement suivant à votre Backbone.View :

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

Dans le cas où vous souhaitez recharger toute la page avec une vue souhaitée. Cela pourrait faire des senes pour le bouton d'accueil. L'avantage sera de rafraîchir la mémoire.

Aller à n'importe quel itinéraire sans le charger (sans le «vrai»), puis recharger

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

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) devrait être:

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

Je devais "rafraîchir" ma page lors de l'événement de changement d'orientation, car toutes mes requêtes multimédia CSS pour mode portrait n'étaient pas correctement exécutées correctement. 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'exhaustivité de cette réponse, cela a été enveloppé dans un code de traitement de changement d'orientation:

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

Vous pouvez également faire un changement sans signification à 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 puisqu'il ne demandera pas de nouvelles données via un appel AJAX si l'URL n'a pas changé.

Vous pouvez facilement actualiser la page en utilisant l'approche ci-dessous:

 @win_loc = window.location.toString().replace("#","") Backbone.history.redirectTo(@win_loc) 

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

La différence entre http://localhost.com/ et http://localhost.com/#!/ est que le second est un lien pour ancrer, il ne charge pas une page, il ne cherche que l'ancre dans la page actuelle , Et se déplace jusqu'à ce qu'il soit trouvé. Vous devez faire en sorte que votre lien ressemble au premier, aucun "#" proche de la fin.

Vous pouvez souvent modifier votre itinéraire pour inclure un splat, afin que vous puissiez ajouter une chaîne aléatoire à la fin d'un href pour le rendre unique, mais correspond toujours à l'itinéraire «à la maison». (Note: faites de cette dernière route.)

Dans les routes :

 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> 

Afin de fournir un extrait réutilisable de code, j'ai augmenté le Backbone.View avec une méthode helper 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 devrions simplement lier l'événement de clic à ce rappel pour exploiter la fonctionnalité de la page de rafraîchissement, dans la mesure où l'assistant de rafraîchissement sera disponible via la chaîne de prototypes

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

Dans la mesure où nous n'avons pas besoin de changer le "tag", c'est une solution plus propre qui va sauver un certain code

J'espère que cela aide

Il fonctionne avec

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

Voici mon approche préférée à ce jour:

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