設定ファイルを使用してフォームを自動的に生成

Question

私のチームのオペレータがデータソース設定を生成するのを助けるウェブサイトを構築しています。

多くのオプションが処理される必要があるためです。私は、ページをレンダリングするための共通のソリューションを設計します：いくつかのルールでhtmlに設定ファイル（おそらく、xmlまたはjson形式）を解析します。たぶん、以下のようなもの：このステップでは、実装するのに容易である

<div class="form-control-group"> 
    <h3>Data type</h3> 
    <p>Select what type do you want.</p> 
    <div class="form-control-filed"> 
     <input type="redio" name="dtype" value="p" show="dtype" checked /> 
     <p>data from promotion center</p> 
    </div> 
    <div class="form-control-filed"> 
     <input type="redio" name="dtype" value="b" /> 
     <p>data from brands center</p> 
    </div> 
</div> 

：

{ 
    "data_type": { 
     "title": "Data type", 
     "description": "Select what type do you want.", 
     "fields": [{ 
      "title": "promotion", 
      "description": "data from promotion center" 
      "type": "redio", 
      "default": true, 
      "value": "p", 
      "name": "dtype" 
     }, { 
      "title": "brands", 
      "description": "data from brands center" 
      "type": "redio", 
      "default": false, 
      "value": "b", 
      "name": "dtype" 
     }] 
    } 
} 

として解析することができます。しかし、いくつかのケースがあるので。私がredio Aをクリックすると、チェックボックスBを隠したいと思います。チェックボックスCのチェックを外した後、入力Dを表示したいのです。設定ファイルを設計して、さまざまなフィールドについてのロジックを記述する方法についてはわかりません。

したがって、重要な点は、私はjsonスニペットでhtmlを解析したいと考えています。次に、各フォームフィールドの動作をマークするシンボルがいくつかあるかもしれませんが、共通のjsを使用して、表示/非表示、フォーカス/ブラーまたはその他のロジックを処理するイベントをバインドできます。属性showと同様に、共通のjs関数を使用して、それを検出し、そのラジオボタンにクリックイベントをバインドし、このラジオがクリックされた後にname="dtype"という要素を表示することができます。

それが良い解決策であるかどうか、そして合理的なjson構造を設計する方法がわかりません。

いずれかの提案がありますようお願いいたします。前もって感謝します。

Answer 1

私はこのケースをあきらめました。私の必要条件として、jsonファイルを使用して、フォームフィールドの情報をビヘイビア定義で設定して、表示/非表示機能を記述します。サーバ側の

{ 
    "xxx": { 
     "title": "Price mode", 
     "description": "group_description", 
     "fields": [{ 
      "title": "", 
      "type": "select", 
      "name": "price_mode", 
      "value": [{ 
       "text": "Store with product", 
       "value": 1, 
       "default": true, 
       "behaviors": { 
        "show": "name1|name2|name3", 
        "hide": "" 
       } 
      }, { 
       "text": "Product", 
       "value": 2, 
       "default": false, 
       "behaviors": { 
        "show": "", 
        "hide": "name1|name2|name3" 
       } 
      }], 
      "require": true, 
      "rule": "" 
     }] 
    } 
} 

コードは、これらの属性を処理して何かをした後の行動を気にするJavaScript関数を使用し、この設定を解析し、HTMLは行動の定義を格納し、特別な属性を持つスニペットとしてレンダリングされますようにラジオボタンをクリックするか、変更します選択リストの値。