Question

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

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();

Answer 1

看起来您在错误的地方请求翻译JSON文件。无论你输入什么代码，视图都会在数据返回时呈现。

潜在的快速修复方法是将转换数据请求置于初始化之后：回调后。一旦数据准备就绪，构建视图并传递翻译。

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;
},

backbone.js的本地化和翻译

1 个答案: