Ember: dynamiczne przełączenie na wybrany język (przy użyciu biblioteki i18n)

Question

Używam biblioteki ember-i18n do tłumaczenia ciągów statycznych używanych w mojej aplikacji. Ponieważ pliki językowe są dość duże, nie chcę ładować przy uruchamianiu aplikacji wszystkich możliwych słowników językowych. Dlatego chcę dynamicznie ładować słownik, gdy użytkownik zdecyduje się zmienić język. Zrobiłem pierwsze wdrożenie, które działa raczej dobrze.

Patrz http://jsfiddle.net/cyclomarc/RYbNG/7/

Po uruchomieniu aplikacji, jest wykonane w języku angielskim. Możesz teraz wybrać jeden z widoków (Informacje lub Informacje), a te są również renderowane w języku angielskim. Po kliknięciu przycisku "Holenderski" ładowany jest słownik języka holenderskiego, a aplikacja jest przekierowywana do trasy indeksu w odpowiednim języku.

Wygląda na to, że nowe ciągi językowe są używane tylko wtedy, gdy przechodzisz na fałszywą trasę, a następnie z powrotem na wybraną trasę (w mojej próbce jest to zawsze "indeks").

updateLanguage: function (lang) { 
    var _self = this; 
    //Load correct dictionary and transition to index route 
    $.getScript("http://libraries.azurewebsites.net/locales/dictionary_" + lang + ".js", function() { 
     CLDR.defaultLanguage = lang; 
     _self.transitionToRoute('I18redirect'); 
    }); 
    } 

App.I18redirectRoute = Ember.Route.extend({ 
    activate: function() { 
    this.transitionTo('index'); 
    } 
}); 

Moje pytania:

1. Jest to najlepszy sposób, aby przeładować view.template (przejście do manekina trasę i potem w Aktywuj przejścia do indeksu)?

2. Czy istnieje sposób przejścia z powrotem na trasę, na której zażądano zmiany języka (trzeba użyć czegoś z get (ścieżka) lub tak)?

3. Chciałbym również przetłumaczyć struny "na zewnątrz" czerwonego div (gniazda aplikacji). Wracam do indeksu, ale w takim przypadku szablon aplikacji nie jest przerysowywany ... Jaki mógł być powód?

4. Czy oczekiwane zachowanie polega na tym, że po odejściu od szablonu i ponownym wprowadzeniu szablonu szablon sam się odbudowuje za pomocą wszystkich ciągów językowych, czy jest to tylko wtedy, gdy w międzyczasie zmieni się język? W jaki sposób można przebudować taki szablon z nowymi ciągami w logu konsoli?

Jakieś inne pomysły, aby uczynić to solidnym rozwiązaniem przełączającym?

Answer 1

Jeszcze nie zrobiłem tłumaczenia w mojej aplikacji, ale planuję to zrobić. Więc interesuje mnie również, jakie jest najlepsze rozwiązanie. Opiszę mój obecny pomysł, w jaki sposób zrobiłbym to z moją obecną wiedzą.

1) Zdefiniuję język jako trasę na najwyższym poziomie.

App.Router.map(function() { 
    this.resource('language', {path:'/language/:lang_code'}, function() { 
     // All other routes 
    }); 
}); 

Następnie zmiana języka będzie linkiem do trasy językowej z odpowiednim kodem języka. Chciałbym również zdefiniować model języka z kodem atrybutu, nazwą, flagą itp. Dla tego. Byłoby to również przydatne, gdy wyświetlana jest lista przycisków wyboru języka lub rozwijanych menu.

Również podczas ładowania modelu podprogramów wiesz już, czym jest język i możesz pobrać modele w bieżącym języku (np. Pomyśl o wpisie na blogu, który jest inny w każdym języku). Użyj this.modelFor ("język"), aby uzyskać bieżący język w dowolnym podprogramie.

2) Jest to trudne. AFAIK nie ma publicznego interfejsu API, aby uzyskać aktualny adres URL ze wszystkimi segmentami dynamicznymi.Obecna jest właściwość currentPath w kontrolerze aplikacji, ale nie uwzględnia ona dynamicznych zmiennych trasy. Istnieją również pewne wewnętrzne zmienne Ember, ale nie użyłbym ich, ponieważ mogą się zmienić. Możesz również sprawdzić aktualny URL routera: this.get ("router.url"). Możesz także ominąć ember i użyć window.location.href, aby bezpośrednio odczytać adres URL. Ale nie spędziłbym na tym zbyt wiele czasu. Użytkownicy rzadko zmieniają swój język (zwykle tylko przy pierwszej wizycie) i nie jest dużym problemem przekierowanie do trasy indeksu po zmianie języka. Zapisałbym go w pliku cookie lub pamięci lokalnej, a następnie nie trzeba zmieniać języka później. Jeśli Ember wymyśli ładny i łatwy sposób na zrobienie tego, możesz łatwo dodać tę funkcję później.

3) Nie wstawiłbym niczego do szablonu aplikacji, ponieważ nie został on przetłumaczony. Użyj szablonu języka zamiast szablonu aplikacji, a następnie wszystko powinno zostać ponownie wyświetlone, gdy zmieniasz język.

4) Myślę, że teksty nie są automatycznie aktualizowane, ponieważ nie są obecnie dwukierunkowe. Ale jest w porządku, ponieważ nie jest dobrym pomysłem posiadanie dwukierunkowych wiązań dla wszystkich tekstów, ponieważ może to spowolnić system. Więc wystarczy umieścić język jako trasy najwyższego poziomu i wszystko powinno działać poprawnie :)

Answer 2

Można by wykorzystać rerender() sposobu widzenia, w ten sposób nie będziesz musiał przejść na manekina URL:

updateLanguage: function(lang) { 

    //Send xhr to get a dictionary for corresponding language 
    this.getDictionary(lang).then(successCb, failureCb); 

    //If dictionary was retrieved, set translations property and 
    function successCb(response) { 
     Ember.I18n.translations = response; 
     $.each(Ember.View.views, function(index, view) { 
      view.rerender(); 
     }); 
    }; 

    function failureCb(response) { 
     console.error('Dictionary for this language is not available'); 
    }; 
} 

Answer 3

Próbowałem wszystkich wymienionych tutaj sposobów i miałem różne problemy z nimi wszystkimi. Znalazłem o wiele bardziej elegancki hack, aby wykonać tę pracę.

CAVEAT: Działa to tylko wtedy, gdy obsługujesz Embera za pomocą Rails (ale prawdopodobnie można go dostosować do pracy z dowolną strukturą po stronie serwera).

W Railsach gem i18n-js integruje się z domyślnymi ustawieniami lokalnymi Rails. Dynamiczne przełączanie w Ember jest ogromnym problemem, ponieważ musisz ręcznie przerysować wszystkie widoki lub zresetować aplikację, aby uzyskać język do aktualizacji po zmianie I18n.locale.

Najlepszym sposobem znalazłem na to jest, aby określić ustawienia regionalne za pomocą parametrów określonych on Rails, zanim Ember nawet obciążeń. konfiguracja

szyn:

Dodać Ember # działanie wygląd kontrolera index tak:

def index 
    if params[:locale] 
    I18n.locale = params[:locale] 
    end 
end 

Następnie w szablonie html, dodać pojedynczą linię javascript:

<html> 
    <head> 
    <%= stylesheet_link_tag :application, :media => :all %> 
    <%= stylesheet_link_tag "application", 'http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,100,700' %> 
    <%= stylesheet_link_tag "application", 'http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic' %> 
    <%= javascript_include_tag :application %> 
    <title>Review Blaster 9000</title> 

<!-- SET LOCALE USING RAILS PARAMETER PARSING --> 
    <script>I18n.locale = '<%=I18n.locale%>';</script> 
<!-- END SET LOCALE --> 

    </head> 
    <body> 

<!-- Start Ember.js --> 
     <%= yield %> 
<!-- End Ember.js --> 

    </body> 
</html> 

Następnie w szablonie określ przełączniki języka:

<a href='/?locale=en'>English</a> 
<a href='/?locale=es'>Spanish</a> 
...etc... 

Kliknięcie tych linków spowoduje całkowite odświeżenie aplikacji. Railsy przeanalizują parametr, ustaw I18n, a następnie Ember zacznie od poprawnej wartości już wcześniej ustawionej, więc wszystko będzie rysowało poprawnie.