Handlebars.js - 構建模板模板

Question

TL; DR

在以下Handlebars模板中......

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

我需要評估{{attribute}}，但要打印value="{{ value of attribute }}" 。

背景

我有一個有趣的模板用途。 我的應用程序有幾十種形式（並且還在增長！），以及幾種顯示它們的方法。 顯然，它們可以顯示在瀏覽器，移動設備或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。 嵌套的可選表單相當復雜，但你明白了。

問題是，現在我有兩個背景 。 第一個是帶有表單數據的JSON，第二個是來自模型的JSON。 我認為有兩種選擇可行。

解決方案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

兩次通過。 讓我的模板輸出一個模板，然后我可以編譯並運行我的模型。 一個很大的優點，我可以預編譯表單。 我更喜歡這種方法。 這是我的問題。 如何從模板中打印出{{attribute}}？

例如，在我的文本模板中......

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

我需要{{attribute}}將被打印到進行評估和{ 屬性的值 {}}。

Answer 1

我選擇了解決方案2，有點兒。 對我來說，重要的是我可以預先編譯表單sans數據。 所以我所做的只是添加一些輔助函數......

Handlebars.registerHelper('FormAttribute', function(attribute) { 
  return new Handlebars.SafeString('{{'+attribute+'}}');    
});

Handlebars.registerHelper('FormChecked', function(attribute) {
  return new Handlebars.SafeString('{{#if ' + attribute + '}}checked="checked"{{/if}}');
});

...我可以在我的表單模板中使用...

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

......結果......

<input type="text" name="FirstName" value="{{FirstName}}">

我仍然有興趣了解是否有一些方法可以忽略Handlebars而不使用幫助器解析大括號{{}}。