Question

我正在对我构建的应用进行国际化。基本上，在标志的clic上触发事件并且回调函数将获取包含应用程序的已翻译标签的json文件。然后我将json数据设置为模型。这只是工作正常。最后，我用模型编译模板，然后渲染它。但我得到一个空白页面，控制台没有错误，只是一个空白页面。我console.log模型和template（）返回的字符串，它们不匹配。

这里是一个简化的示例（应用程序最初是用法语构建的*）：

var app_multi_lang_model = Backbone.Model.extend({

    MODE_AVANCE : "mode: AVANCE",
    MODE_OPERATEUR: "mode : OPERATEUR",
    MENU: "Menu",
    LANGUE: "langue",
    FRANCAIS: "Français",
    ANGLAIS: "Anglais",
    CHINOIS:"Chinois",
    ANNULER: "annuler",
    VALIDER: "valider"
});

var app_view= Backbone.View.extend({
        el:"#app_template_placeholder" ,
        template: _.template($('#app_template').html()),
        events:{
            "click #us_flag":"us_flag_clicked"
        },

    us_flag_clicked: function(){

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                app_multi_lang_model_instance.set(JSON.parse(xhttp.responseText)); 
                app_view_instance.render();
            }
        };
        xhttp.open("GET", "../languages/english.js", true); //loading the json file
        xhttp.send();

    },

    render: function(){

        console.log(this.model);
        this.$el.html(this.template(this.model));
        console.log(this.template(this.model));
    }
});

var app_multi_lang_model_instance= new app_multi_lang_model();
var app_view_instance= new app_view({model:app_multi_lang_model_instance});

这就是english.js的样子：

{

    "MODE_AVANCE": "mode: AVANCED",
    "MODE_OPERATEUR": "mode : OPERATOR",
    "MENU": "Menu",
    "LANGUE": "language",
    "FRANCAIS": "French",
    "ANGLAIS": "English",
    "CHINOIS":"Chinese",
    "ANNULER": "cancel"
}

and here are the screen of this.model just before .template(this.model) call:

and here a sample of the string that .template() returns

我们看到模型属性现在翻译成英文，但html应该仍然用法语呈现。我究竟做错了什么？为什么template（）仍然使用前一个模型返回模板，而我将更新后的模板传递给它。为什么浏览器不显示template（）返回的字符串？

Answer 1

好的，我发现了什么问题！问题是我宣布模型的方式。

var app_multi_lang_model = Backbone.Model.extend({

MODE_AVANCE : "mode: AVANCE",
MODE_OPERATEUR: "mode : OPERATEUR",
MENU: "Menu",
LANGUE: "langue",
FRANCAIS: "Français",
ANGLAIS: "Anglais",
CHINOIS:"Chinois",
ANNULER: "annuler",
VALIDER: "valider"
});

属性未包含在＆＃34;默认{...}＆＃34;所以我的属性不被视为主干属性（我无法使用model.get访问它们）。但它们之所以存在，是因为我可以做到这一点，并且可以做到＃app; app_multi_lang_model_instance.VALIDER＆＃34;例如。当我使用model.set获取JSON文件并将数据设置到我的模型时，我不会更改我的属性，我创建了包含在＆＃34;默认值中的新属性：{...}＆＃34;所以我的模型看起来像这样：

var app_multi_lang_model = Backbone.Model.extend({
defaults:{
   MODE_AVANCE : "mode: AVANCED",
   MODE_OPERATEUR: "mode : OPERATOR",
   MENU: "Menu",
   LANGUE: "language",
   FRANCAIS: "French",
   ANGLAIS: "English",
   CHINOIS:"Chinese",
   ANNULER: "cancel",
   VALIDER: "ok"
}
MODE_AVANCE : "mode: AVANCE",
MODE_OPERATEUR: "mode : OPERATEUR",
MENU: "Menu",
LANGUE: "langue",
FRANCAIS: "Français",
ANGLAIS: "Anglais",
CHINOIS:"Chinois",
ANNULER: "annuler",
VALIDER: "valider"
});

因此，当我将它传递给_.template时，它将使用它首先找到的属性，即展开的属性填充我的html。

我修复了将我的属性包装在＆＃34;默认值：{...}＆＃34;并将此行替换为this.$el.html(this.template(this.model));：this.$el.html(this.template(this.model.toJSON()));，否则无法访问属性。

但是，如果返回的html现在正确，则浏览器不会显示任何内容。为什么呢？

下划线模板不会编译我在参数中传递的模型

1 个答案: