Meteor フレームワークを調査しています。Java EE / JavaServer Faces (JSF) の経験は豊富ですが、JavaScript 開発は初めてです。http://twitter.github.io/bootstrap/base-css.html#formsで説明されているように、適切にフォーマットされた「水平フォーム」を作成しようとしています。私の問題は、これにより、DRYではない入力フィールドごとに多くのHTMLが繰り返されることです...
そこで、JSF 2.x で「複合コンポーネント」のような構成を作成しようとしています。これは、Meteor-template を呼び出してその中の値を代用する方法を探していることを意味します。
私のテンプレートは次のようなものです:
<template name="formField">
<div class="control-group">
<label class="control-label" for="{{this.id}}">{{this.label}}:</label>
<div class="controls">
{{this.formField}}
</div>
</div>
</template>
次のように呼び出すことで、部分的に機能させることができました。
{{> formField labels.x}}
labels
次のようにマップを定義した場所:
Template.myTemplate.labels = {
"x": {id: 'idx', label: 'labelx'},
"y": {id: 'idy', label: 'labely'},
"z": {id: 'idz', label: 'labelz'}
}
もちろん、問題は<input>
テンプレート内の要素を置き換えることです。これを行うためにあらゆる種類の方法を試しましたが、いくつかの問題があります。
<input>
-element をformField
-template に追加することはできますがvalue
、その<input>
-element をフォームで編集中の JavaScript オブジェクトのプロパティにバインドできません。- - 要素を返す関数を作成することもできますが
<input>
、JavaScript ソースにマークアップ コードが含まれてしまいます。
もう 1 つの問題は、マップに満足できないことですTemplate.myTemplate.labels
。リテラル値を使用できなかったので、これはやむを得ないようです。次のようにテンプレートを呼び出すことができればいいのですが。
{{> formField idx labelx}}
{{> formField idy labely}}
{{> formField idz labelz}}
結論として、基本的に 1 つの質問があります。Meteor/Handlebars を使用してある種のコンポーネントを作成する最良の方法は何ですか?