Backbone.js 的本地化和翻译答案

【问题标题】：localization and translation for backbone.jsBackbone.js 的本地化和翻译
【发布时间】：2013-12-04 19:48:11
【问题描述】：

我试图弄清楚如何使用backbone.js 和marionette 添加本地化。您可以在here 中查看代码。我不知道如何显示要在 html 页面上显示的 json 文件的翻译。

var TranslateForm = new Backbone.Marionette.Application();

 TranslateForm.addRegions({
     form: "#form"
  });

  TranslateForm.User = Backbone.Model.extend({
        defaults: {
            lang: '' //the translation
        }
    });

   //create a View for our User model       
    TranslateForm.UserFormView = Backbone.Marionette.ItemView.extend({
       onBeforeRender: function(){
        var lang = this.model.attributes.lang;

        //let's get the json translation file before we render the view 
        $.getJSON("json/"+ lang +".json", function(data) {
            //data = this.model.locale;
            console.log(data);
        });
    },
    onRender: function(){

    },
    className: 'row',
    tagName: "div",
    template: "#translate_this"
    });

  TranslateForm.on("initialize:after", function(){

//initialize model
var form = new TranslateForm.User(
        {
              "lang": "en"
        }
);

//initialize view
TranslateForm.form.show(new TranslateForm.UserFormView({
        model: form
}));


  });


  TranslateForm.start();

【问题讨论】：

标签： javascript backbone.js localization marionette

【解决方案1】：

您对翻译 JSON 文件的请求似乎放错了位置。无论您在其中放置什么代码，在数据返回时视图都已经呈现。

一个潜在的快速解决方法是将翻译数据请求放在 initialize:after 回调中。一旦数据准备好，构建视图并传入翻译。

TranslateForm.on("initialize:after", function(){
    var lang = 'en';
    $.getJSON("json/"+ lang +".json", function(data) {
        var form = new TranslateForm.User();

        TranslateForm.form.show(new TranslateForm.UserFormView({
            model: form,
            translations: data
        }));
    });
}):

另外...您需要覆盖视图的 serializeData 函数，以便将翻译数据传递到实际模板中，如下所示：

serializeData: function(){
    var modelData = this.model.toJSON();

     modelData.translations = this.options.translations;

     return modelData;
},

【讨论】：