Alpacajsフォームを既存のフォームに追加する

Question

入力フィールドと計算式が動的に設定されるユーザー入力計算の手段を作成しようとしています。たとえば、あるものリンゴの数とリンゴ1つ分の価格の入力、私は価格を得るために入力を掛けます。別のケースでは、私はの長さが,の幅との高さの入力を計算します。

私はAlpacajs

でフォームフォームJSONを入力、データや計算機能を保存して組み立て直すことにしました。しかし、計算フィールドは、大きなフォームの一部でしかありません。だから、

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

を使用して はalpacaForm要素内に新しいフォームを追加します。

alpacajsによって生成されたフィールドに既存のフォームが追加されていますか？

Answer 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 }); 

私はすべてこれを行うために必要がないようにするアルパカのオプションを見つけることを期待していましたが、そこにいないようです1になる。