将 Alpacajs 表单附加到现有表单答案

【问题标题】：Append Alpacajs form to existing form将 Alpacajs 表单附加到现有表单
【发布时间】：2017-08-03 16:05:37
【问题描述】：

我正在尝试创建一种用户输入计算方法，其中输入字段和计算公式是动态设置的。例如，a 有 Number of apples 和 Price for one apple 输入，因此我将输入相乘得到价格。在另一种情况下，我有 length、width 和 height 输入来计算体积。

我决定存储输入、数据和计算函数，并用Alpacajs重新组装表单form json

但计算字段只是更大表单的一部分。所以使用

$("#alpacaForm").alpaca(window.alpacaForm.object);

在alpacaForm 元素内添加一个新表单。

有没有办法将 alpacajs 生成的字段追加到现有表单？

【问题讨论】：

标签： javascript alpacajs

【解决方案1】：

我设法做到这一点的唯一方法是渲染到一个单独的元素并复制这些元素。

例如：

<form id="my-form">

  <!-- My controls: -->
  <label for="foo">Foo</label>
  <input id="foo">

  <label for="bar">Bar</label>
  <input id="bar">

  <!-- I want the schema-based controls to go into this div. -->
  <div class="schema-control-container"></div>

</form>

JavaScript（和 jQuery）：

var $myForm = $('#my-form');
var $schemaControlContainer = $myForm.find('.schema-control-container');
var mySchema = JSON.parse(mySchemaJson);

var $scratchpad = $('<div id="alpacaScratchpad"></div>').hide().
    insertAfter($myForm);

function postRender (control) {

  // I actually have multiple forms, so I need to make sure the IDs are unique.
  $scratchpad.find('.alpaca-control').each(function (i, alpacaControl) {
    alpacaControl.id = $myForm.attr('id') + '-' + alpacaControl.id;
  });
  $scratchpad.find('.alpaca-control-label').each(
      function (i, alpacaControlLabel) {
    alpacaControlLabel.htmlFor = $myForm.attr('id') + '-' +
        alpacaControlLabel.htmlFor;
  });

  // Select elements we want to copy. Note that I haven't tried this with any
  // particularly complicated JSON schemata, so this may be naïve.
  var $goodies = $scratchpad.find('.alpaca-control,.alpaca-control-label');

  // Optional: mark schema controls as such, and allow autocompletion.
  $goodies.filter('.alpaca-control').addClass('my-schema-datum').
      attr('autocomplete', null);

  // Remove Alpaca classes and Bootstrap crap. (I hate Bootstrap, but the 'web'
  // version of Alpaca doesn't seem to work right now. TODO: Update after
  // https://github.com/gitana/alpaca/issues/507 is fixed.)
  $goodies.removeClass('alpaca-control').removeClass('alpaca-control-label').
      removeClass('form-control').removeClass('control-label');

  // Move the goodies to the schema control container, in the form.
  $schemaControlContainer.append($goodies);

  // Clean up the clutter we don't need.
  $scratchpad.empty();
}

// Have Alpaca render the schema into the scratchpad, and then run the function
// we just defined.
$scratchpad.alpaca({ schema: mySchema, postRender: postRender });

我希望找到一个 Alpaca 选项来避免需要执行所有这些操作，但似乎没有。

【讨论】：