サーバサイド及びフロントにおける各階層でのパラメータのやりとり（Java、Velocity、TypeScript、Underscore.js_template）

前提

• サーバサイド：Java、Spring
• サーバサイドテンプレート：Velocity
• フロント：TypeScript、Backbone.js
• フロントエンドテンプレート：Underscore.js_template

Java、Velocity、TypeScript、Underscore.js_templateによるパラメータのやりとりをまとめる。

用いるファイル名は、

• TestController.java
• test.vm
• TestView.ts
• Test.html

とする。

Java　→　Velocity

TestController.java

model.addAttribute("param_java", param);

test.vm

param_vm="$!{param_java}"

で、Java階層からVelocityにパラメータを渡せる。

Velocity　→　TypeScript

test.vm

<div id="id1" param_vm="$!{param_java}"></div>

TestView.ts

this.el = '#id1';
this.paramTs = JSON.parse(this.$el.attr('param_vm')); // param_vmが数値など
this.paramTs = this.$el.attr('param_vm'); // param_vmが文字列など

で、VelocityからTypeScriptにパラメータを渡せる。

TypeScript　→　Underscore.js_template

TestView.ts

this.template = JST['Test'];
this.$el.html(this.template({
    paramTs: this.paramTs
}));

Test.html

{{paramTs}}

で、TypeScriptからTemplateにパラメータを渡せる。

Underscore.js_template　→　TypeScript

Test.html

<input type="text" name="paramTemplate" value="{{paramTs}}" /> <label>テストパラメータ</label>

TestView.ts

var paramTs:string = this.$('[name= paramTemplate]').val();

で、Templateでの入力内容をTypeScript階層に渡せる。

TypeScript　→　Velocity

運用上この必要性を感じたことはない。

Velocity　→　Java

運用上この必要性を感じたことはない。