Translations proof of concept.
This commit is contained in:
Родитель
aeacaace23
Коммит
aac3f03aca
.jshintrc
app
|
@ -23,6 +23,7 @@
|
|||
"require": true,
|
||||
"console": true,
|
||||
"define": true,
|
||||
"router": true
|
||||
"router": true,
|
||||
"translator": true
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"Firefox Accounts": "Firefox Accounts!"
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
'use strict';
|
||||
|
||||
define([
|
||||
'jquery'
|
||||
],
|
||||
function($) {
|
||||
var Translator = function(language) {
|
||||
this.language = language;
|
||||
this.translations = {};
|
||||
};
|
||||
|
||||
Translator.prototype = {
|
||||
// Fetches our JSON translation file
|
||||
fetch: function(done) {
|
||||
$.ajax({ dataType: 'json', url: '/i18n/' + this.language.replace(/-/, '_') + '/messages.json' })
|
||||
.done(function(data) {
|
||||
this.translations = data;
|
||||
}.bind(this))
|
||||
.always(done);
|
||||
},
|
||||
|
||||
// Gets a translated value by key but returns the key if nothing is found
|
||||
get: function(key) {
|
||||
return this.translations[key] || key;
|
||||
}
|
||||
};
|
||||
|
||||
return Translator;
|
||||
});
|
|
@ -30,12 +30,17 @@ require.config({
|
|||
|
||||
require([
|
||||
'backbone',
|
||||
'router'
|
||||
'router',
|
||||
'lib/translator'
|
||||
],
|
||||
function (Backbone, Router) {
|
||||
// This is kind of weak but solves circular dependency issues
|
||||
function (Backbone, Router, Translator) {
|
||||
// A few globals
|
||||
window.router = new Router();
|
||||
window.translator = new Translator(window.navigator.language);
|
||||
|
||||
// Get the party started
|
||||
Backbone.history.start({ pushState: true });
|
||||
// Don't start backbone until we have our translations
|
||||
translator.fetch(function() {
|
||||
// Get the party started
|
||||
Backbone.history.start({ pushState: true });
|
||||
});
|
||||
});
|
||||
|
|
|
@ -56,7 +56,7 @@ function($, Backbone, IntroView, SignInView, SignUpView, ConfirmView, SettingsVi
|
|||
},
|
||||
|
||||
watchAnchors: function() {
|
||||
$(document).on('click', "a[href^='/']", function(event) {
|
||||
$(document).on('click', 'a[href^="/"]', function(event) {
|
||||
if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<h1>Firefox Accounts</h1>
|
||||
<h1>{{#t}}Firefox Accounts{{/t}}</h1>
|
||||
|
||||
<div class="placeholder">
|
||||
Placeholder
|
||||
|
|
|
@ -17,13 +17,27 @@ function(_, Backbone) {
|
|||
|
||||
this.destroySubviews();
|
||||
|
||||
this.$el.html(this.template(this.context()));
|
||||
this.$el.html(this.template(this.getContext()));
|
||||
|
||||
this.afterRender();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
getContext: function () {
|
||||
var ctx = this.context() || {};
|
||||
|
||||
ctx.t = this.translate;
|
||||
|
||||
return ctx;
|
||||
},
|
||||
|
||||
translate: function() {
|
||||
return function(text) {
|
||||
return translator.get(text);
|
||||
};
|
||||
},
|
||||
|
||||
context: function() {
|
||||
// Implement in subclasses
|
||||
},
|
||||
|
|
Загрузка…
Ссылка в новой задаче