1

Webアプリケーションで構築する必要のある複数のフォームのうちの2つの粗い画像を添付しました。

形

フォーム全般を考えると、次の要素があります。

  1. チェックボックス
  2. 日にち
  3. 日付時刻
  4. ファイル
  5. 画像
  6. パスワード
  7. ラジオボタン
  8. テキストボックス
  9. ラベル
  10. テキストエリア
  11. 時間
  12. リンク

すべてのフォーム（構成ファイル、データベースなど）の構造/メタデータをどこかに保存し、アクションに応じて、それに基づいてオンザフライでフォームを生成できる方法があるかどうか疑問に思いました。メタデータ-ユーザーは値を入力するだけです。私はこのようないくつかのトピックを経験しましたが、答えを見つけることができませんでした。可能であれば、生成されたページ/フォームで適切にレンダリングされるように格納された要素を構造化する方法、コンボボックスの値を格納する方法、テキストボックスを読み取り専用にする方法、およびそのようなクエリが追加されました私の混乱。

私はJQueryとSpringの使用に制限されていますが、もちろん、同じことを実現するための他のテクノロジーと方法についても知りたいと思います。

ありがとう、よろしく！

*最初の編集が始まります

pbibergalによって提供されるソリューションは私の問題に対処しているように見えますが、同じことを達成するためのSpringベース/純粋なJQueryベースのソリューションをまだ楽しみにしています-探索して使用することが許可されるかどうかはわかりませんJSテンプレートエンジン！

*最初の編集は終了します

*2回目の編集開始

これは、doT.jsを使用してフォームをレンダリングしようとしている単一のページです-フォームをレンダリングできるjsコードに渡されるHTMLタグがどこかにありませんか？

    <html>
    <script src="../../jquery1.8.3/jquery-1.8.3.js"></script>

    <script src="https://raw.github.com/olado/doT/master/doT.js">
    </script>

    <script id="form-tmpl" type="text/x-dot-template">
        {{~it.form :value:index}}
            <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
        {{~}}
    </script>

    <script>
    var json =  "{fileState:"Processed",reason:"",cancel:"Cancel"}";

    $(document).ready(function(){
        var tmpl = doT.template(document.getElementById('form-tmpl').text);
        $('body').append(tmpl(json));
    });
    </script>

    <body>
    </body>

    </html>

*2回目の編集終了

4

1 に答える 1

3

データの保存にはJavascriptオブジェクトを使用できます。例えば。

var json = {"form": [
{
    "type": "text", "element": "input", "value": "some text"
},
{
    "type": "button", "element": "input", "value": "Click here"
}
]}

MozillaIndexedDBやWebSQLなどのローカルデータベースにデータを保存します。もう1つの方法は、ローカルストレージに保存することです。次に、JavaScriptテンプレートエンジンを使用してフォームを作成します。doT.jsはこれに適しています：http： //olado.github.com/doT/

HTMLファイルの場合：

<script id="form-tmpl" type="text/x-dot-template">
    {{~it.form :value:index}}
        <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
    {{~}}
<script/>

JSファイルの場合：

$(document).ready(function(){
    var tmpl = doT.template(document.getElementById('form-tmpl').text);
    $('body').append(tmpl(json));
});
于 2012-11-27T15:12:10.893 に答える