テンプレート内に表示されるデータが国際化されたテキストまたはモデル属性のいずれかである場合、テンプレートのレンダリングは簡単ですが、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()
ui
render()