Динамически добавлять новые div/html с JSP?

Question

В настоящее время у меня есть веб-страница с несколькими строками объектов, помеченных как «вещи». На данный момент я их жестко закодировал в html как «Скорость вентилятора, температура, свет и т. Д.», Как видно на этом изображении: http://i.imgur.com/ocRUlaD.png

Я ищу, чтобы сделать эти записи динамическими, заставив их хранить в базе данных (используя postgres в настоящее время), и этот блок заполняется непосредственно из базы данных. Таким образом, пользователь может добавлять или удалять «вещи» и постоянно обновляться, подобно корзине покупок.

Теперь, чтобы это сработало, я немного смущен относительно того, каким будет способ сделать это, чтобы я мог динамически добавлять HTML для каждой записи. В конце концов, каждая строка записи должна иметь свою собственную форму внутри, поэтому код HTML будет очень похож на каждую строку, но для каждой формы должны быть уникальные ссылки.

В настоящее время я уже могу получить все записи из базы данных в формате JSON. Какой был бы лучший подход для добавления этих динамических блоков div/html для создания новых строк для каждой «вещи»?

Вот пример html-кода, который у меня есть для div, ответственного за «Свет 1». Остальные строки будут очень похожи, но с их соответствующими действиями формы и идентификаторами.

<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> 

Answer 1

Используйте шаблон javascript и заполните его с помощью базы данных.

http://underscorejs.org/#template

Или, если вы хотите сделать шаблонный на стороне сервера, вы можете сделать что-то вроде:

JSP tricks to make templating easier?