下划线模板不编译我传入参数的模型

Question

我正在对我构建的应用程序进行国际化。基本上，点击一个标志会触发一个事件，回调函数将获取一个 json 文件，其中包含应用程序的翻译标签。然后我将 json 数据设置为一个模型。那很好用。最后我用模型编译模板并渲染它。但我只是得到一个空白页，控制台没有错误，只是一个空白页。我 console.log 模型和字符串 template() returns 和它们不匹配。

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

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"
});

属性未包含在 "default{...}" 中，因此我的属性不被视为 backbone 属性（我无法使用 model.get 访问它们）。但是它们存在是因为我可以做 "app_multi_lang_model_instance.VALIDER" 。当我获取 JSON 文件并使用 model.set 将数据设置到我的模型时，我没有更改我的属性，而是创建了一个包含在 "defaults:{...}" 中的新属性，因此我的模型如下所示：

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，即展开的属性。

我修复了将我的属性包装在 "defaults:{...}" 中并将这一行：this.$el.html(this.template(this.model)); 替换为这一行：this.$el.html(this.template(this.model.toJSON())); 否则将无法访问属性。

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

下划线模板不编译我传入参数的模型

underscore template does NOT compile the model I pass in argument

backbone.js

underscore.js-templating