0

現在、「もの」というラベルの付いたオブジェクトの行がいくつかある Web ページがあります。今のところ、この画像に見られるように、「ファン速度、温度、光など」として html にハードコーディングしています: http://i.imgur.com/ocRUlaD.png

これらのエントリをデータベースに保存し (現在は postgres を使用)、このボックスにデータベースから直接入力することで、これらのエントリを動的にしようとしています。このようにして、ユーザーは「物」を追加または削除し、ショッピング カートと同様に継続的に更新することができます。

これが機能するために、各エントリの HTML を動的に追加できるようにする方法について少し混乱しています。最終的には、エントリのすべての行に独自のフォームが含まれている必要があるため、HTML コードは各行で非常に似ていますが、フォームごとに固有のリンクが必要になります。

現在、データベースからすべてのエントリを JSON 形式で取得することができます。これらの動的 div/html ブロッ​​クを追加して、「もの」ごとに新しい行を作成する最善の方法は何でしょうか?

「Light 1」を担当する div 用に私が持っているサンプル HTML コードを次に示します。他の行は非常に似ていますが、適切なフォーム アクションと ID があります。

<div class="large-event" id="space-font">
              <!-- Collapsable Button -->
              <a data-toggle="collapse" data-target="#light1" href="#">
                Light 1
                <img src="onBulb.png" id="bulbPic1" width="25" height="40" alt="">
              </a>

              <!-- LIGHT 1 Collapse Material -->
              <div id="light1" class="collapse out">
                <div class="shift-right">
                  <form method="post" style="display:inline" action="/testlamp">
                    <input type="hidden" name="node_address" value="1">
                    <input type="radio" id="lampOn1" name="data_value" value="on" checked> On
                    <input type="radio" id="lampOff1" name="data_value" value="off"> Off
                    <input type="button" id="lampButton1" inline class="btn" onclick="lampStatusChange(this.id)" value="Submit">
                  </form>
                </div>
              </div>
</div>
4

1 に答える 1

0

JavaScript テンプレートを使用して、データベース情報を入力しますか?

http://underscorejs.org/#template

または、サーバー側でテンプレートを作成したい場合は、次のようにすることができます。

テンプレート化を容易にするための JSP トリック?

于 2013-06-04T03:33:59.350 に答える