3

TL;DR

次のハンドルバー テンプレートでは...

<div class="field field-label">
  <label>{{label}}</label><input type="text" value="{{{{attribute}}}}">
</div>

{{attribute}} を評価する必要がありvalue="{{ますが、属性の値を出力}}"する必要があります。

バックグラウンド

テンプレートの興味深い使い方があります。私のアプリケーションには数十のフォーム (そして増え続けています!) があり、それらを表示するいくつかの方法があります。明らかに、それらはブラウザー、モバイル デバイス、または PDF などで表示できます。私がやりたいのは、これらのフォームを JSON で定義して、MongoDB のような場所に置くことです。そうすれば、HTML ビュー、モバイル アプリ、PDF レンダリング機能をすべて更新することなく、簡単に変更できます。

{
  title: 'Name of this Form',
  version: 2,
  sections: [
    { 
      title: 'Section Title',
      fields: [
        {
          label: 'Person',
          name: 'firstname',
          attribute: 'FIRST',
          type: 'text'
        }, {
          label: 'Birthday',
          name: 'dob',
          attribute: 'birthday',
          type: 'select',
          options: [
            { label: 'August' },
            { label: 'September' },
            { label: 'October' }
          ]
        },
        ...
        ...

それは味です。そのtype: 'text'結果<input type="text">、nameは入力の名前、attributeはモデルからの属性、yada yada になります。ネストされたオプションのフォームではかなり複雑になりますが、要点はわかります。

問題は、今では2 つのコンテキストがあることです。1 つ目はフォーム データを含む JSON で、2 つ目はモデルからの JSON です。うまくいくと思う2つのオプションがあります。

解決策 1

ヘルパーとして登録されたモデル コンテキストを含む簡単なクロージャー。

var fn = (function(model) {
  return function(attr) {
    return model[attr]
  }
})(model);

Handlebars.registerHelper('model', fn)

...そのように使用するには...

<input type="text" name="{{name}}" value="{{model attribute}}">

解決策 2

2 つのパス。テンプレートにテンプレートを出力させ、それをコンパイルしてモデルで実行できるようにします。大きな利点の 1 つは、フォームをプリコンパイルできることです。私はこのアプローチを好むでしょう。これが私の質問です。テンプレートから {{attribute}} を出力するにはどうすればよいですか?

たとえば、私のテキストテンプレートでは...

<div class="field field-label">
  <label>{{label}}</label><input type="text" value="{{{{attribute}}}}">
</div>

私は{{attribute}}評価され、{{属性の値}}が出力される必要があります。

4

1 に答える 1