javascript – 如何在Backbone.Marionette视图中最轻松地呈现i18n文本和模型属性(使用Handlebars模板)

2023年6月11日 232次阅读

当模板中显示的数据是国际化文本或模型属性时,渲染模板是小菜一碟,但是当在一个模板中渲染BOTH时,我似乎无法找到一个干净的解决方案.

作为参考,我通过Require.js的i18n插件使用i18n.

我们假设我有一个简单的模板：

<h3>{{displayText.load}} #{{id}}</h3>

<h4 id="loading-load-data">{{displayText.loadingLoadData}}...</h4>

displayText对象表示i18n文本,而id项表示Backbone Model属性.

在View上使用Backbone的模板属性,我可以执行以下操作以使用i18n文本呈现模板,但没有模型属性数据：

return Backbone.Marionette.ItemView.extend({
    template: function () {
        var compiledTemplate = Handlebars.compileClean(template);

        // localizedText represents the i18n localization object, using the Require.js i18n plugin
        return compiledTemplate(localizedText);
    },
    // some more View properties and methods
});

但是,一旦我想显示模型数据,这不再有效,主要是因为在模板属性中未定义(因此我无法引用this.model.attributes),似乎我必须退回要覆盖render()方法,将i18n对象和Model属性传递给模板,如下所示：

return Backbone.Marionette.ItemView.extend({
    template: Handlebars.compileClean(template),
    render: function() {
        var templateParams = _.extend({}, this.model.attributes, localizedText),
            renderedTemplate = this.template(templateParams);

        this.$el.html(renderedTemplate);

        this.bindUIElements();
        this.delegateEvents();

        return this;
    }
});

我真的很想留下Marionette对render()的默认处理,并且只使用template属性来渲染i18n文本和Model数据.这可能吗？

奖励：假设我必须覆盖render(),我注意到这样做,Marionette Views上提供的this.ui属性不再将每个项目包装为jQuery对象.这意味着：

this.ui.loadingNotification.show();

停止运行,抛出未捕获的TypeError：对象#loading-load-data没有方法’show’.为什么会这样,我怎样才能恢复正确的this.ui jQuery包装功能？

编辑：解决了奖金;只需要在render()方法中调用this.bindUIElements()调用就可以正确地将元素绑定到ui哈希.请参阅上面的render()示例.

最佳答案 解决：所以答案很简单.事实证明,当用作函数时,您可以将参数传递给template：属性,此参数表示与该视图/模板关联的模型：

template: function (model) {
    var templateParams = _.extend({}, model, localizedText),
        renderedTemplate = Handlebars.compileClean(template);

    return renderedTemplate(templateParams);
},

然后不再需要覆盖render()方法,并且可以按预期将i18n文本和模型数据呈现到模板中.

点赞