I have a multiple language website that display several (a dozen) content pages, with pretty urls like this :
example.com <- home for default language (french)
example.com/biographie <- page 1
example.com/en <- home for english language
example.com/en/biography <- page 1 english translation
I would like to merge pages together and provide full ajax navigation, pretty much like Pitchfork did. And the most important thing is to preserve non-javascript clients (SEO, social networks and others) page view.
The server is providing the complete webpage, and then when Backbone is initialize, it pre-fetches other pages and inject it into the DOM to speed up navigation. When I navigation to another page, I use Backbone builtin History API to record the new URL in the history and I change my view to display the requested page.
var Navigator = Backbone.Router.extend({
routes: {
"*page": "showPage",
},
showPage: function(page) {
this.pages[page].show();
}
}
The issue I have is to manage i18n (I mean translated pages). How can I setup my router to deal with the language ? How should I handle language switch ?
routes: {
"*page": "showPageFr",
"en/*page": "showPageEn",
},
showPageFr: function(page){
showPage(page, 'fr');
},
showPageEn: function(page){
showPage(page, 'en');
},
showPage: function(page, lang) {
// How should I manage 'lang' parameter here ?
this.pages[page].show();
}
I had a look at i18n JS frameworks, but I don't think I need that because I want to translate the entire page content, not some UI elements. All the translation part is managed server-side.
Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.
BackboneJS is a lightweight JavaScript library that allows to develop and structure the client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.
There is only method named "start" can be used to manipulate the Backbone. js history.
You can use the Backbone. Model without jQuery, but Backbone.
Thanks to DashK who drove my on the good road. The solution is to change the History root when English language is detected.
var Router = Backbone.Router.extend({
language: null,
initialize: function(options){
this.language = options.language;
Backbone.history.start({pushState: true, root:'/'+ (this.language ? this.language : '')});
},
routes: {
":chapter(/*subpage)": "go",
"" : "go" // match home route
},
go: function(chapter, subpage) {
}
});
// wait for the document to be ready
$(function(){
var lang;
if($.url().segment(1) === 'en') { lang = 'en'; }
new Router({language: lang});
});
Then, I do not have to care about the language when I use router.navigate("some-chapter")
in my code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With