Лучшая практика для заполнения формы? - PullRequest
Новая
       8

Лучшая практика для заполнения формы?

0 голосов
/ 25 августа 2011

У меня есть представление ejs, которое содержит форму, которую мне нужно заполнить данными, чтобы можно было редактировать основную запись. Я передал объект, содержащий данные, представлению и теперь вижу два способа заполнения формы, и мне нужна помощь в определении того, какой из них лучше.

Вариант 1 - "серверная" совокупность

Я могу поместить значения формы непосредственно в такие элементы: 

<input type="text" id="txtFirstName" name="txtFirstName" value="<%= person.firstName%>" />
<input type="text" id="txtLastName" name="txtLastName" value="<%= person.lastName%>" />
...
etc

Вариант 2 - "клиентская" совокупность

Кроме того, я могу вернуть весь объект клиенту, а затем использовать javascript для заполнения полей формы следующим образом: 

<script>
   var data = "<%=JSON.stringify(person)%>".replace(/&quot;/gi, '"');
   var p = eval('(' + data + ')');
   populateForm(p);

   function populateForm (person) {
     $("#txtFirstName").val( person.firstName );
     $("#txtLastName").val( person.lastName );
     ....
     etc
  }
</script>

Преимущество варианта 2 заключается в том, что функцию можно легко использовать повторно для повторного заполнения формы, если новые данные загружаются через ajax. Это также устраняет необходимость в экранировании данных, поскольку все это уже в объекте js, тогда как вариант 1 потребует некоторого типа кодирования html и экранирования кавычек. Вариант 1, с другой стороны, работает без JS.

Существует ли стандартный, наилучший практический способ сделать это (и является ли это одним из этих вариантов)?

1 Ответ

0 голосов
/ 25 августа 2011

Я бы загружал данные с помощью ajax даже в тех случаях, когда это не является строго необходимым, и рендерил шаблон на стороне клиента.Таким образом ваша модель загружается в контроллер javascript и перекачивается в представление вашего шаблона. 

<script>
$(function (){
  var person = null;
  $.getJSON('/person',function (data) {
    person = data;
    var form = new EJS({url: '/form.ejs'}).render(person);
    $('#formContainer').append(form);
  });
});
</script>
...