2017-07-03 1 views
0

J'utilise backbone pour gérer mon routage. Je dois mettre en œuvre en plusieurs langues sur mon site comme suit:Backbone, multilingue et racine

  • en français: www.example.com
  • en anglais: www.example.com/en

De plus j'ai une root supplémentaire sur mon URL sur la production, donc il donne www.example.com/dev ou www.example.com/dev/en

La racine est fournie par mon serveur web (noeud). Il est récupéré via la variable <% - prefix%> dans l'exemple ci-dessous.

Cela fonctionne bien sur localhost, mais dès que je passe sur mon serveur avec une URL avec la racine supplémentaire, les pages ne sont pas trouvées. Je suis à la recherche d'une solution générique pour gérer les deux situations (avec ou sans root).

<!DOCTYPE html> 
<html> 
<head> 
... 
</head> 
<body> 

<script type="text/javascript"> 

window.onload = function() 
{  
    let prefix = '<%- prefix %>'.substr(1); 

    var BaseRouter = Backbone.Router.extend({  
     routes: { 

      [prefix + 'imgfocus/:imgid'] : 'imgfocus', 
      [prefix + 'skymap/:obsids'] : 'skymap', 
      // ... 
      }, 

     imgfocus : function(imgid) 
     { 
      navservice.loadScreen({page : 'imgfocus', imgid : imgid}); 
     }, 
     skymap : function(obsids, stateid, tourid) 
     { 
      navservice.loadScreen({page : 'skymap', obsids : parseInt(obsids) === 0 ? undefined : obsids, stateid : stateid, tourid : tourid}); 
     }, 
     /// ... 
    }); 


    let br = new BaseRouter(); 

    for (let i = 0; i < navservice.languages.length; i++) 
     { 
      if (navservice.languages[i] !== '') 
      { 
       for (let key in br.routes) 
       { 
        br.routes[navservice.formatUrl(key, navservice.languages[i]).substr(1)] = br.routes[key]; 
       } 
      } 
     } 
     // language retrieval 
     var language = navservice.getUserLanguage(); 

     Backbone.history.start({pushState : true, root: '/' + (language ? language : '')}); 
    } 

    $(document).on("click", "a:not([data-bypass])", function (evt) { 
     var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
     var root = location.protocol + "//" + location.host + Backbone.history.options.root; 
     if (href.prop && href.prop.slice(0, root.length) === root) { 
      evt.preventDefault(); 
      var route = href.attr; 

      // language retrieval 
      var lang = navservice.getUserLanguage(route); 

      if(lang && route.slice(0,lang.length+1) === "/" + lang) { 
       route = route.slice(lang.length+1); 
      } 

      Backbone.history.navigate(route, {trigger : true}); 
     } 
    }); 
} 

</script> 

Répondre

0

En fait, j'ai réussi à le réparer en ajoutant un journal à l'intérieur de backbone.js et en vérifiant ce qui se passait.

Le véritable problème résidait dans l'utilisation de la variable 'préfixe' dans la définition des routes. Je l'ai enlevé et la plupart du correctif a été fait.

+0

Savez-vous pourquoi cela posait problème? – vassiliskrikonis

+0

En fait, je n'ai pas vraiment compris comment fonctionnait la variable "root". Et c'était le problème. Pour autant que je comprenne, l'url est géré comme suit: [nom de domaine] + [racine] + [route]. Donc j'ai simplement enlevé le "préfixe" de mon code et l'ai mis dans la racine. Et c'est tout! – MrFlo

0

Créer différents modèles, puis utilisez l'option history root:

Backbone.history.start({pushState: true, root: "/en/"}) 

Plus d'info backbone history start.