填充表单的最佳实践？

Question

我有一个 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 的情况下使用。

是否有标准的、最佳实践的方式来做到这一点（并且是这些选项之一）？

Answer 1

即使在不是绝对必要的情况下，我也会使用 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>