4

テンプレート内に表示されるデータが国際化されたテキストまたはモデル属性のいずれかである場合、テンプレートのレンダリングは簡単ですが、1つのテンプレート内の両方をレンダリングする場合、クリーンなソリューションを見つけることができないようです。

参考までに、Require.jsのi18nプラグインを介してi18nを利用しています。

単純なテンプレートがあるとしましょう。

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

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

displayTextオブジェクトはi18nテキストを表し、アイテムidはバックボーンモデル属性を表します。

ビューでBackboneのtemplateプロパティを使用して、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テンプレート属性内で定義されていないため(参照できないため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;
    }
});

render()Marionetteのデフォルトの処理をそのままにして、templateプロパティのみを使用してi18nテキストとモデルデータの両方をレンダリングしたいと思います。これは可能ですか?

ボーナス:オーバーライドする必要があると仮定すると、オーバーライドしている間、MarionetteViewsで提供される属性が各アイテムをjQueryオブジェクトとしてラップしなくなっrender()たことに気づきました。this.uiこの意味は:

this.ui.loadingNotification.show();

機能を停止し、をスローしUncaught TypeError: Object #loading-load-data has no method 'show'ます。this.uiこれはなぜですか?適切なjQueryラッピング機能を復元するにはどうすればよいですか?

編集:ボーナスを解決しました; 要素をハッシュに適切にバインドするには、メソッド内でthis.bindUIElements()呼び出しを行う必要があります。上記の例を参照してください。render()uirender()

4

1 に答える 1

2

解決済み:答えは恥ずかしいほど簡単です。関数として使用する場合、パラメーターをtemplate:プロパティに渡すことができます。このパラメーターは、そのビュー/テンプレートに関連付けられたモデルを表します。

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

    return renderedTemplate(templateParams);
},

その後、render()メソッドを上書きする必要がなくなり、i18nテキストとモデルデータの両方を期待どおりにテンプレートにレンダリングできます。

于 2012-12-05T19:03:11.243 に答える